Estoy cambiando el modo de una tarjeta usando un editMode booleano. ahora, cuando editMode === true , aparece algo de contenido en el div secundario , lo que le da al div principal más altura y ancho. Quiero dar transición a esta expansión de div principal cuando editMode es igual a true . Estoy trabajando en vue.js.
Cómo puedo hacer esto ?
<div class="parent"> <h2> Card Title </h2> <div class="child" v-if="editMode"> some content including inputs, labels, ... <div> <button @onClick="editMode = !editMode"/> </div>Resolví esta pregunta usando vuetify-transitions. El problema era que la inmersión principal en sí misma estaba en otro componente de envoltura y pude resolverlo dando las transiciones de envoltura.
Demostración de trabajo:
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>