Плавный переход высоты v-if / else в Vue.js

Question

У меня есть компонент, который загружает данные, а затем отображает их. Пользователь может изменить модуль, который запускает загрузку новых данных. Во время загрузки данных отображается состояние загрузки. Я хотел бы плавно переходить между этими состояниями с помощью animate.css. У меня он примерно работает, но все же есть некоторая нервозность. Как добиться плавного масштабирования высоты элемента при изменении состояния?

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/

Answer 1

Бесстыдный плагин, я создал vue-smooth-reflow именно для этого случая использования.

Вот демонстрация: 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);
    }
  }
})