vuejs2 - How do I add CSS animations when updating a value with vue.js?

Question

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

question from:https://stackoverflow.com/questions/42537359/how-do-i-add-css-animations-when-updating-a-value-with-vue-js

Answer 1

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/