0

我有一个加载数据然后显示它的组件。用户可以修改触发新数据加载的模块。在加载数据时，会显示加载状态。我想使用 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/

4

1 回答 1

0

无耻的插件，我为这个确切的用例创建了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);
    }
  }
})
于 2019-09-12T06:40:50.583 回答