Fonction d'animation dans Vue3 : obtenez des effets d'animation sympas

Vue3 est la dernière version de Vue, et elle a également été grandement améliorée et mise à jour en termes d'animation. La fonction d'animation de Vue3 est implémentée à l'aide de l'API de composition et des composants de transition, permettant aux développeurs d'obtenir plus facilement divers effets d'animation sympas.

1. API de composition

L'API de composition est une nouvelle fonctionnalité introduite dans Vue3, qui peut optimiser la lisibilité, la maintenabilité et la réutilisation des composants. Dans l'API Composition, nous pouvons utiliser ref et reactive pour créer des données réactives, utiliser watchEffect et calculated pour surveiller les modifications des variables et des propriétés calculées, et utiliser onMounted et onUnmount pour exécuter des fonctions de hook de cycle de vie, etc.

En terme d'animation, l'API Composition propose deux fonctions : useAnimation et useTransition.

1. useAnimation

La fonction useAnimation nous permet de créer une fonction d'animation à l'intérieur du composant pour gérer une logique d'animation complexe. Sa syntaxe de base est la suivante :

import { useAnimation } from 'vue';

export default {
  setup() {
    const {animate, stop} = useAnimation();
    
    return {
      animate,
      stop
    }
  }
}

En utilisant la fonction renvoyée par useAnimation, nous pouvons créer une série d'images clés d'animation puis exécuter ces animations via la fonction animate. Par exemple, nous pouvons créer une animation de mise à l'échelle comme celle-ci :

const { animate, stop } = useAnimation();
  
const scale = animate({
  0: {
    transform: 'scale(1)',
  },
  0.5: {
    transform: 'scale(1.2)',
  },
  1: {
    transform: 'scale(1)',
  },
}, {
  duration: 1000,
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
});

Dans cet exemple, nous utilisons la fonction animer pour créer une animation de mise à l'échelle. En spécifiant l'attribut de transformation de l'image clé, l'élément peut être agrandi. et réduit. Dans le deuxième paramètre de la fonction animer, nous pouvons définir la durée, la fonction d'assouplissement, le nombre d'itérations et le sens de lecture de l'animation. De cette façon, nous pouvons implémenter l'effet d'animation de zoom dans notre composant Vue.

2. useTransition

La fonction useTransition nous permet d'effectuer certaines opérations d'animation de transition lorsque l'élément entre ou sort. Sa syntaxe de base est la suivante :

import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    return {
      enter,
      leave
    }
  }
}

En utilisant les fonctions enter et exit, nous pouvons définir différents effets de transition d'animation pour les comportements d'entrée et de sortie des éléments. Par exemple, dans l'exemple suivant, nous définissons un. Effet de fondu d'entrée et de sortie :

<template>
  <div :class="{'opacity-0': !show}" v-enter="fadeIn" v-leave="fadeOut"></div>
</template>

<script>
import { useTransition } from 'vue';

export default {
  setup() {
    const { enter, leave } = useTransition();

    const fadeIn = enter((el, done) => {
      el.style.opacity = '0';
      setTimeout(() => {
        el.style.opacity = '1';
        done();
      }, 1000)
    });

    const fadeOut = leave((el, done) => {
      el.style.opacity = '1';
      setTimeout(() => {
        el.style.opacity = '0';
        done();
      }, 1000)
    });

    return {
      fadeIn,
      fadeOut,
      show: true
    }
  }
}
</script>

Dans cet exemple, nous exécutons respectivement les fonctions fadeIn et fadeOut lorsque l'élément entre et sort, et exécutons l'effet de transition de fondu d'entrée et de sortie en en passant différentes fonctions de rappel. Dans la fonction de rappel, nous pouvons utiliser la fonction setTimeout pour retarder l'exécution de l'animation et utiliser le paramètre done pour identifier si l'animation est terminée afin d'obtenir l'effet de transition de l'animation.

2. Composant de transition

En plus des fonctions d'animation fournies par l'API Composition, Vue3 fournit également un composant de transition pour nous aider à réaliser certains effets d'animation de transition de base, tels que fondu d'entrée Fondu de sortie, glisser vers la gauche, glisser vers le haut, faire pivoter, etc. Sa syntaxe de base est la suivante :

<transition name="fade">
  <div v-if="show">HELLO VUE3</div>
</transition>

Dans le composant Transition, nous pouvons spécifier différentes valeurs de nom pour utiliser différents effets d'animation de transition, tels que fondu, glissement vers la gauche, glissement vers le haut, rotation, etc. Dans Vue3, de nombreux effets de transition sont fournis par défaut et peuvent être obtenus en définissant la valeur du nom. Par exemple, nous pouvons implémenter un simple effet d'animation de fondu entrant et sortant à travers l'exemple suivant :

<template>
  <div>
    <button @click="show = !show">Show/Hide</button>
    <hr>
    <transition name="fade">
      <p v-if="show">Hello Vue3</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Dans cet exemple, nous obtenons un effet de fondu entrant et sortant en définissant le nom pour s'estomper, via dynamique Changez la valeur de show pour contrôler l'affichage et le masquage des éléments. Dans l'effet d'animation, nous pouvons utiliser la propriété transition de CSS3 pour définir l'effet d'animation de la transition, définir la durée de l'animation et la fonction d'accélération via .fade-enter-active et .fade-leave-active, et définir la durée de l'animation et la fonction d'assouplissement via .fade-enter et .fade -leave-to définit l'état de début et de fin de l'animation.

Résumé :

Dans Vue3, les fonctions d'animation et les composants de transition sont deux moyens courants d'obtenir des effets d'animation. Le premier est plus flexible et gratuit et peut gérer une logique d'animation plus complexe. . Ce dernier est plus simple et plus facile à utiliser, adapté à certains effets d'animation de transition de base. Quelle que soit la méthode utilisée, vous pouvez utiliser les propriétés et fonctions CSS3 pour obtenir divers effets d'animation sympas et ajouter des couleurs vives à nos applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!