web-dev-qa-db-fra.com

Comment ajouter des animations CSS lors de la mise à jour d'une valeur avec vue.js?

J'utilise vue.js pour rendre un tableau dans une liste.

Chaque élément de la liste a une valeur numérique, et lorsque cette valeur change, je voudrais utiliser une animation.

Exemples d'animations:

  • La valeur existante disparaît progressivement, la nouvelle valeur apparaît progressivement.
  • Fond jaune derrière la valeur qui s'estompe.
  • La couleur du texte change, puis revient à l'original.

Comment puis-je faire ceci?

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

vue.jsvuejs2
24
James

Vous souhaitez utiliser :key avec un <transition>. Voici une démo très basique.

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

Ensuite, comme value change le slide-fade l'animation sera utilisée. Un élément avec l'ancienne valeur utilisera l'animation leave et l'élément avec la nouvelle valeur utilisera l'animation enter.

Voici une démo rapide: https://jsfiddle.net/jx52bfpc/2/

46
Bill Criswell