title: How do I add CSS animations when updating a value with vue.js?
body: <p>I am using vue.js to render an array into a list. </p>
  
  <p>Each item in the list has a numeric value, and when that value changes I would like to use an animation. </p>
  
  <p>Examples of animations: </p>
  
  <ul>
  <li>Existing value fades out, new value fades in. </li>
  <li>Yellow background behind value which fades out. </li>
  <li>Text colour changes then fades back to original.</li>
  </ul>
  
  <p>How can I do this?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;ul&gt;
      &lt;li v-for="user in users"&gt;
        {{ user.name }} = {{ user.value }}
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;button v-on:click="users[0].value++"&gt;Change value&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var app = new Vue({
    el: '#app',
    data:
    {
      users:
      [
        { name: 'Barbara Dwyer', value: 14 },
        { name: 'William B Hardigan', value: 10 }
      ]
    }
  })
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/ryxjOE" rel="noreferrer">http://codepen.io/anon/pen/ryxjOE</a></p>