使用vue.js更新值时如何添加CSS动画？

Question

我正在使用vue.js将数组渲染到列表中.

列表中的每个项目都有一个数值,当该值发生变化时,我想使用动画.

动画示例:

• 现有价值淡出,新价值逐渐消失.
• 在淡出的价值后面的黄色背景.
• 文本颜色更改然后淡化回原始颜色.

我怎样才能做到这一点？

HTML

<div id="app">
  <ul>
    <li v-for="user in users">
      {{ user.name }} = {{ user.value }}
    </li>
  </ul>

  <button v-on:click="users[0].value++">Change value</button>
</div>

JS

var app = new Vue({
  el: '#app',
  data:
  {
    users:
    [
      { name: 'Barbara Dwyer', value: 14 },
      { name: 'William B Hardigan', value: 10 }
    ]
  }
})

http://codepen.io/anon/pen/ryxjOE

Answer 1

你想:key和a一起使用<transition>.这是一个非常基本的演示.

<transition name="slide-fade" mode="out-in">
  <div :key="value">
    {{ value }}
  </div>
</transition>

然后,作为value更改,slide-fade将使用动画.具有旧值的元素将使用leave动画,具有新值的元素将使用enter动画.

这是一个快速演示:https://jsfiddle.net/jx52bfpc/2/

Answer 2

您可以使用标准 css 动画，其键取决于更改的值。通过这种方式，新元素将开始新的动画，而前一个动画将被丢弃。

new Vue({
  data: {
    value: 5,
  },
  methods: {
    add() {
      this.value++
    },
    subtract() {
      this.value--
    },
    keep() {
      this.value=this.value
    },
  },
}).$mount('#app')

.mycolor {
  background-color: green;
  animation: mymove 5s;
}
@keyframes mymove {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="mycolor" :key="value">
    {{ value }}
  </div>
  <button @click="add">
   Add
  </button>
  <button @click="subtract">
   Subtract
  </button>
  <button @click="keep">
   Keep
  </button>
</div>