Vue js中数据变化的动画跨度

Question

我想在line 更改时为 div 设置动画（淡入/淡出）：

<div v-text="line"></div>

这里是js 代码，它会在一定间隔内更改line 数据。

setInterval(()=> {
   this.line = this.randomString();
}, 10000);

我知道如何使用v-if 进行隐藏/显示。但是如何在数据更改时使用 Vue.js 为 span 或 div 设置动画？

Answer 1

这应该可行：

<template lang="pug">
  div
    button(@click="handleSomeChange") Test Animation

    transition(name="fade")
      div(v-if="showContent")
        h4 Voila! It works ;)
</template>

<script>
export default {
  data() {
    return {
      showContent: true,
    };
  },

  methods: {
    handleSomeChange() {
      this.showContent = false;

      // writer you data change logic here...

      setTimeout(() => {
        this.showContent = true;
      }, 100);
    },
  },
};
</script>

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.4s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>