const myVueInstance = new Vue({
el: '#app',
data: {
showBlueElement: true
}
})
.a, .b {
height: 50px;
width: 50px;
background: red;
}
.b {
background: blue;
transition: transform 1s ease-in-out;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div class="a" v-if="showBlueElement" @click="showBlueElement = !showBlueElement"></div>
<div class="b"></div>
</div>
Is there a way to animate the transition of the second element (blue) towards the top instead of an instant change?