Tutoriel VueJS : Animez vos composants avec Vue Flip Toolkit

Dans cette vidéo je vous propose de découvrir comment mettre en place des animations basées sur la technique FLIP avec VueJS et la librairie vue-flip-toolkit (basée sur react-flip-toolkit).

Pour suivre ce tutoriel vous pouvez télécharger le code de base utilisé dans la vidéo.

Fonctionnement

Vue-flip-toolkit repose sur l'utilisation de 2 composants

• Flipper sert de container et permet de configurer le comportement de l'animation. Ce composant utilise une propriété flipKey qui devra être modifiée lorsqu'un changement de structure est opéré.
• Flipped permet de mémoriser la position des éléments à animer. Chaque élément devra posséder un attribut flipId unique qui permet de l'identifier.

Voici un petit exemple avec une liste réorganisée de manière aléatoire.

<template>
  <div class="p-4">
    <Flipper :flipKey="key">
      <button
        class="bg-grey text-grey-darkest uppercase text-xs font-bold tracking-wide p-2"
        @click="shuffle"
      >shuffle</button>
      <ul class="list mt-4">
        <Flipped v-for="num in list" :key="num" :flipId="num.toString()">
          <li>{{num}}</li>
        </Flipped>
      </ul>
    </Flipper>
  </div>
</template>

<script>
import {Flipper, Flipped} from "vue-flip-toolkit";
import {shuffle} from '../helpers'

export default {
  name: "list",
  components: {
    Flipper,
    Flipped
  },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
  },
  methods: {
    shuffle() {
      this.list = shuffle(this.list);
    }
  },
  computed: {
    key() {
      return this.list.join("");
    }
  }
};
</script>