Smooth transition of v-if/else height in Vue.js

Question

I have a component that loads data and then displays it. The user can modify the module which triggers new data to load. While data is loading a loading state is shown. I would like to smoothly transition between these states using animate.css. I have it roughly working, but there is still some jumpiness to it. How can you get the height of the element to smoothly scale on changing state?

JS:

new Vue({
  el: '#demo',
  data: {
    show: true
  },
  methods: {
    loadData() {
        this.show = !this.show
      setTimeout(() => {  
        this.show = !this.show
      }, 1000);
    }
  }
})

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">


<div id="demo" style="border:1px solid #ddd">
  <button v-on:click="loadData()">
    Toggle
  </button>
  <transition 
    appear-active-class="animated fadeIn"
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOutDown faster"
    mode="out-in"
  >
    <p v-if="!show" key="loading"  style="border:1px solid #ddd">Loading</p>
    <p v-if="show" key="data"  style="border:1px solid #ddd">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna metus, pulvinar a dapibus nec, mattis eu nunc. Sed sed lorem id quam tincidunt accumsan. Nam pharetra, nunc facilisis malesuada tincidunt, nulla mi molestie neque, quis dictum dolor dolor a mi. Suspendisse sed est mollis risus vehicula viverra ac in nunc. Duis cursus mauris vitae sapien tincidunt, sit amet sodales dui mattis. Aliquam dui magna, sagittis at tristique et, consequat at sapien. Quisque ac bibendum urna, et aliquet orci. Ut vitae ipsum id odio consectetur eleifend a nec dui. Suspendisse nulla quam, suscipit in pretium id, dignissim sit amet tortor. Aliquam aliquam, leo et tincidunt venenatis, neque purus cursus elit, ac commodo quam leo at ligula.


    </p>
  </transition>
</div>

https://jsfiddle.net/2ud5s1ne/11/

score 0 · Answer 1 · answered Sep 12 '19 at 06:40

Shameless plug, I created vue-smooth-reflow for this exact use case.

Here's a demo: https://jsfiddle.net/guanzo/snyvoxec/1/

new Vue({
  el: '#demo',
  mixins: [SmoothReflow],
  data: {
    show: true
  },
    mounted(){
        this.$smoothReflow()
    },
  methods: {
    loadData() {
        this.show = !this.show
      setTimeout(() => {  
        this.show = !this.show
      }, 1000);
    }
  }
})

Smooth transition of v-if/else height in Vue.js

1 Answers1