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

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/

Answer 2

You can use a standard css animation with a key dependent on the changed value. In this way a new animation starts for the new element while the previous one is discarded.

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>