使用 vue.js 更新值时如何添加 CSS 动画? [英] How do I add CSS animations when updating a value with vue.js?

问题描述

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

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

动画示例:

• 现有值淡出，新值淡入.
• 值后面的黄色背景逐渐淡出.
• 文本颜色会发生变化，然后逐渐恢复原状.

我该怎么做?

HTML

<ul><li v-for="user in users">{{ user.name }} = {{ user.value }}<button v-on:click="users[0].value++">更改值</button>

JS

var app = new Vue({el: '#app',数据:{用户:[{名称:'芭芭拉德怀尔'，值:14}，{ 名称:'威廉 B 哈迪根'，值:10 }]}})

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

解决方案

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

<div :key="值">{{ 价值 }}

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

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

I am using vue.js to render an array into a list.

Each item in the list has a numeric value, and when that value changes I would like to use an animation.

Examples of animations:

• Existing value fades out, new value fades in.
• Yellow background behind value which fades out.
• Text colour changes then fades back to original.

How can I do this?

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

解决方案

You'd want to use :key along with a <transition>. Here's a very basic demo.

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

Then, as value changes the slide-fade animation will be used. An element with the old value will use the leave animation and the element with the new value will use the enter animation.

Here's a quick demo: https://jsfiddle.net/jx52bfpc/2/

这篇关于使用 vue.js 更新值时如何添加 CSS 动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！