I'm changing mode of a card using a boolean editMode. now when editMode === true some content appears in the child div which gives parent div more height and width. I want to give transition to this expansion of parent div when editMode equals to true. I'm working on vue.js.
How can I do this ?
<div class="parent">
<h2> Card Title </h2>
<div class="child" v-if="editMode">
some content including inputs, labels, ...
<div>
<button @onClick="editMode = !editMode"/>
</div>
I solved this question by using vuetify-transitions. The problem was the parent dive itself was in another wrapper component and I could solve it by giving the wrapper transitions.
Working Demo :
new Vue({
el: '#app',
data: {
editMode: true
}
}).fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="parent">
<h2> Card Title </h2>
<transition name="fade" :css="true">
<div class="child" v-if="editMode">
some content including inputs, labels, ...
</div>
</transition>
<button v-on:click="editMode = !editMode">Click Me!</button>
</div>
</div>