Issue
I am new to vue, and just found out about vue transitions. I am trying to move a div up and expand its width on click of the div, but i haven't fully grasped the concept of the transition yet. Below is the image of what I am trying to achieve and the code.
<template>
<div class="hello">
<transition name="slide">
<div class="meal__status">
<a @click="toggle = !toggle; move();" class="meal__status-wrap"></a>
</div>
</transition>
<div v-if="toggle" class="overlay"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
toggle: false
};
},
methods: {
move() {}
}
};
</script>
<style scoped>
.overlay {
background: rgba(0, 0, 0, 0.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
text-align: center;
transition: opacity 500ms;
opacity: 1;
}
.meal__status-wrap {
background-color: #42b983;
height: 60px;
width: 70px;
display: block;
position: relative;
z-index: 99999;
}
</style>
this is the link to the code sandbox https://codesandbox.io/s/awesome-matsumoto-7rlxb?file=/src/components/HelloWorld.vue
this is what I am trying to achieve
Solution
Transitions are only for when an element is shown/hidden with v-if or v-show. Because you aren't using v-if
or v-show
you shouldn't try and use a transition.
Instead, toggle a class on the element with an @click
handler and then style the element based on that class.
<template>
<div class="hello">
<div
class="meal__status"
:class="{ 'meal__status--active': mealStatusActive }"
@click="mealStatusActive = !mealStatusActive"
></div>
<div class="overlay"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
mealStatusActive: false
};
}
};
</script>
<style scoped>
.meal__status {
background-color: #42b983;
height: 60px;
width: 70px;
display: block;
position: relative;
z-index: 99999;
}
.meal__status--active {
margin-top: -60px;
width: 100%;
}
.overlay {
background: rgba(0, 0, 0, 0.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
text-align: center;
transition: opacity 500ms;
opacity: 1;
}
</style>
Answered By - cam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.