我正在使用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 }
]
}
})
您想与
:key一起使用<transition>。这是一个非常基本的演示。然后，作为
value更改，slide-fade将使用动画。具有旧值的元素将使用leave动画，而具有新值的元素将使用enter动画。这是一个快速演示：https : //jsfiddle.net/jx52bfpc/2/