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>

动画跨越Vue js中的数据更改

1 个答案: