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

vue.js Vue.js

村村阳光

2020-03-12

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

第1226篇《使用vue.js更新值时如何添加CSS动画？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
Sam小哥逆天 2020.03.12

您想与: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/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android