'Transition a div on changing a boolean value

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>
javascripthtmlcssvue.jscss-transitions


Solution 1:[1]

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.

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ali forooghie
Solution 2

Related Questions