Close
Cliquez ici pour la documentation v3.x.

Guide

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Transitions d'état

Le système de transition de Vue offre de nombreuses façons simples d’animer l’entrée, la sortie et les listes, mais qu’en est-il de l’animation de vos propres données ? Par exemple :

Tous ces éléments sont déjà stockés sous forme de nombres bruts, ou peuvent être convertis en nombres. Dès lors, nous pouvons animer ces modifications de l’état à l’aide de bibliothèques tierces vers un état intermédiaire, en combinaison avec la réactivité de Vue et les systèmes de composants.

Animation de l’état avec des observateurs

Les observateurs nous permettent d’animer les changements de toute propriété numérique dans une autre propriété. Cela peut paraitre compliqué dans l’abstrait, donc plongeons-nous dans un exemple en utilisant GreenSock:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>
new Vue({
  el: '#animated-number-demo',
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }
})

{{ animatedNumber }}

Lorsque vous mettez à jour le nombre, la modification est animée en dessous de l’input. Cela fait une belle démonstration, mais qu’en est-il de quelque chose qui n’est pas directement stocké comme un nombre, comme n’importe quelle couleur CSS valide par exemple ? Voici comment nous pourrions accomplir cela avec l’ajout de Tween.js et Color.js:

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>

<div id="example-7">
  <input
    v-model="colorQuery"
    v-on:keyup.enter="updateColor"
    placeholder="Entrer une couleur"
  >
  <button v-on:click="updateColor">Mettre à jour</button>
  <p>Aperçu :</p>
  <span
    v-bind:style="{ backgroundColor: tweenedCSSColor }"
    class="example-7-color-preview"
  ></span>
  <p>{{ tweenedCSSColor }}</p>
</div>
var Color = net.brehaut.Color

new Vue({
  el: '#example-7',
  data: {
    colorQuery: '',
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()

      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = ''
    }
  }
})
.example-7-color-preview {
  display: inline-block;
  width: 50px;
  height: 50px;
}

Aperçu :

{{ tweenedCSSColor }}

Transitions d’état dynamiques

Tout comme pour les composants de transition de Vue, les transitions d’état de données peuvent être mises à jour en temps réel, ce qui est particulièrement utile pour le prototypage ! Même en utilisant un polygone SVG simple, vous pouvez obtenir de nombreux effets qu’il serait difficile de concevoir tant que vous n’avez pas un peu joué avec les variables.

Consulter cet exemple pour voir le code complet derrière la démo ci-dessus.

Organisation des transitions dans les composants

La gestion de nombreuses transitions d’états peut augmenter rapidement la complexité d’une instance ou d’un composant Vue. Heureusement, de nombreuses animations peuvent être extraites dans des composants enfants dédiés. Faisons cela avec l’entier animé de notre exemple précédent :

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>

<div id="example-8">
  <input v-model.number="firstNumber" type="number" step="20"> +
  <input v-model.number="secondNumber" type="number" step="20"> =
  {{ result }}
  <p>
    <animated-integer v-bind:value="firstNumber"></animated-integer> +
    <animated-integer v-bind:value="secondNumber"></animated-integer> =
    <animated-integer v-bind:value="result"></animated-integer>
  </p>
</div>
// Cette logique d'interpolation complexe peut maintenant être réutilisée entre
// les entiers que nous souhaitons animer dans notre application.
// Les composants offrent également une interface propre pour configurer
// des transitions plus dynamiques et des stratégies complexes
// de transition.
Vue.component('animated-integer', {
  template: '<span>{{ tweeningValue }}</span>',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      tweeningValue: 0
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      this.tween(oldValue, newValue)
    }
  },
  mounted: function () {
    this.tween(0, this.value)
  },
  methods: {
    tween: function (startValue, endValue) {
      var vm = this
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()

      animate()
    }
  }
})

// Toute la complexité a été supprimée de l'instance principale de Vue !
new Vue({
  el: '#example-8',
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result: function () {
      return this.firstNumber + this.secondNumber
    }
  }
})
+ = {{ result }}

+ =

Dans les composants enfants, nous pouvons utiliser n’importe quelle combinaison de stratégies de transition qui ont été abordées dans cette page, ainsi que celles offertes par le système intégré de transition de Vue. En utilisant les deux, il existe très peu de limites à ce qui peut être accompli.

La partie suivante est est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou participez à la traduction française ici.

Donner vie à ses créations

Animer, par définition, signifie donner vie. Malheureusement, quand les designers créent des icônes, logos et mascottes, ils fournissent généralement des images statiques ou des SVGs. Aussi l’octochat de GitHub, l’oiseau de Twitter et bien d’autres logos en forme de créature ne semblent pas réellement vivants.

Vue peut vous aider. Puisque les SVGs ne sont que des données, nous avons uniquement besoin de voir à quoi ressemblent ces créatures quand elles sont excitées, pensives, en interaction, etc. Ensuite Vue vous aidera aux transitions entre ces états, faisant de vos pages d’accueil, vos animations d’attente et de vos notifications quelque chose de vivant.

Sarah Drasner nous le démontre dans l’exemple ci-dessous, utilisant une combinaison de changement d’état interactif et d’état en boucle animée.

Voir le pen Wall-E contrôlé par Vue par Sarah Drasner (@sdras) sur CodePen.

← Transitions d'entrée, de sortie et de liste Mixins →
Une erreur dans cette page ou une envie de contribuer à la traduction ? Éditez cette page sur GitHub !