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

【问题标题】：How do I add CSS animations when updating a value with vue.js?使用 vue.js 更新值时如何添加 CSS 动画？
【发布时间】：2017-07-21 02:42:19
【问题描述】：

我正在使用 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>

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

【问题讨论】：

vuejs.org/v2/guide/transitioning-state.html
我不想“补间”这些值。我只是想表明该值已更新。
使用手表？当值发生变化时，可能会为您的元素添加一个动画类。
这是唯一的方法吗？似乎有很多支持动画元素的隐藏/显示，但没有动画改变值！
老实说，我对 Vue 动画/过渡不是非常了解，这就是为什么我坚持评论而不是答案的原因。很可能有更好的方法。

标签： vue.js vuejs2

【解决方案1】：

您希望将:key 与<transition> 一起使用。这是一个非常基本的演示。

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

然后，随着value 的变化，slide-fade 动画将被使用。具有旧值的元素将使用leave 动画，具有新值的元素将使用enter 动画。

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

【讨论】：

抱歉，这似乎不适用于我的数组示例。
我收回它...它确实有效！ codepen.io/anon/pen/MpKpNE您有机会更新答案以包含数组版本吗？然后我可以将其标记为已接受。
数组在这里不会有太大变化。通常，如果我发现自己在做users[0].value++ 之类的事情，则表明我需要一个组件，我应该将该数组项作为道具传递。
这个答案的基本部分是你必须让 Vuejs 来创建一个新元素——没有新元素你不能有动画。 :key="value" 通过直接将div 绑定到值来强制在“值”更改时创建新的div。
请注意这里的重点是@James 正确指出的:key="value；我要强调这一点，因为即使我尝试了它但它没有用，我检查了vue docs 并且相关部分说它只支持Conditional rendering (using v-if) 和Conditional display (using v-show)，我只是把我的想法归零它只是不工作（和 vue 文档一样棒，我觉得这部分有点混乱，因为动画也会出现在 value change 上）。

【解决方案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>

【讨论】：