recherche

Maison  >  Article  >  interface Web  >  Comment implémenter une animation dans Vue3 en utilisant JavaScript ?

Comment implémenter une animation dans Vue3 en utilisant JavaScript ?

WBOY
WBOYavant
2023-05-09 23:34:061136parcourir

Vue d'ensemble

L'animation peut en fait être implémentée non seulement en utilisant CSS, mais aussi en utilisant js. Quelle est la différence entre les deux ? CSS accorde plus d'attention à l'affichage de l'animation et a de meilleures performances, tandis que les performances de la méthode js sont légèrement moins bonnes, mais elle peut effectuer des opérations supplémentaires dans chaque processus d'exécution de l'animation. C'est-à-dire le processus d'exécution de l'animation du début à l'exécution jusqu'à la fin. Si vous utilisez CSS pour le faire, vous pouvez tout au plus contrôler les propriétés de l'animation, juste pour afficher l'animation. En utilisant js, nous pouvons utiliser l'élément dom au début de l'exécution de l'animation et ajouter les effets souhaités. Lorsque l'exécution de l'animation se termine, nous pouvons effectuer certaines opérations de fin d'animation, comme ouvrir une boîte de dialogue ou autre. Il est plus pratique de les implémenter en utilisant js.

Exemple d'analyse

Supposons que nous voulions obtenir un effet : laissez la couleur de la police de "hello world" changer entre le rouge et le vert une fois par seconde, terminez après 5 secondes, puis ouvrez une boîte de dialogue après la fin, affichez un morceau de contenu, code Comme suit : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JS实现动画</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
                show:false
            }
        },
        methods: {
            handleClick(){
                this.show = !this.show;
            },
            handleBeforeEnter(el){
                el.style.color = &#39;red&#39;;
            },
            handleEnterActive(el, done){
             const animation = setInterval(() => {
                    const color = el.style.color;
                    if(color === &#39;red&#39;){
                        el.style.color = &#39;green&#39;;
                    }else{
                        el.style.color  = &#39;red&#39;;
                    }
                },1000);
                setTimeout(() =>{
                    clearInterval(animation);
                    done();// 通知下一个函数的执行
                },5000);
            },
            handleEnterEnd(){
                alert(123);
            }
        },
        template: 
        `
        	<transition
        		:css="false"
       		 @before-enter="handleBeforeEnter"
             @enter="handleEnterActive"
             @after-enter="handleEnterEnd">
              <div v-if="show" >hello world </div>
          </transition>
          <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

À partir du code ci-dessus, nous pouvons voir que dans la balise de transition, nous utilisons :css = "false" C'est parce que nous voulons utiliser js pour l'animation, donc nous devons d'abord le désactiver CSS, puis implémenter @before-enter="handleBeforeEnter", @enter="handleEnterActive" et @after-enter code> respectivement pour correspondre aux animations Avant le début, l'animation s'exécute et l'animation se termine Les trois fonctions suivantes : <code>handleBeforeEnter, handleEnterActive et handleEnterEnd<.> sont des js correspondant aux trois étapes, nous pouvons effectuer les opérations que nous souhaitons effectuer dans ces fonctions. Dans cet exemple : :css = "false" 这是因为我们要使用js做动画，所以要先禁用掉css，然后分别实现了@before-enter="handleBeforeEnter", @enter="handleEnterActive" ,@after-enter 分别对应动画开始前，动画执行中，动画执行结束，而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三个函数是对应三个阶段的js函数，我们可以在这几个函数中执行我们想要执行的操作。在本例中：

handleBeforeEnter(el)
{
   el.style.color = &#39;red&#39;;
}

动画执行前我们将文本的颜色设置成红色

当动画执行的时候

handleEnterActive(el, done){
             const animation = setInterval(() => {
                    const color = el.style.color;
                    if(color === &#39;red&#39;){
                        el.style.color = &#39;green&#39;;
                    }else{
                        el.style.color  = &#39;red&#39;;
                    }
                },1000);
                setTimeout(() =>{
                    clearInterval(animation);
                    done();// 通知下一个函数的执行
                },5000);
            }

动画执行的时候，我们隔1秒去判断当前文本的颜色，如果是红色，则改成绿色，如果是绿色则改成红色，然后持续5秒结束。

当动画结束的时候

handleEnterEnd(){
     alert(123);
}

动画结束后，会执行handleEnterEndrrreee

Avant l'exécution de l'animation, nous définissons la couleur du texte sur rouge🎜🎜Lorsque l'animation est exécutée🎜rrreee🎜Lorsque l'animation est exécutée, nous déterminons la couleur du texte actuel toutes les 1 seconde. S'il est rouge, passez au vert, s'il est vert, passez au rouge, puis continuez pendant 5 secondes. 🎜🎜Lorsque l'animation se termine🎜rrreee🎜Une fois l'animation terminée, handleEnterEnd sera exécuté, puis une boîte de dialogue apparaîtra, affichant 123.🎜

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!

JavaScript css JS dom transition
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment configurer le routage Vue3, effectuer des sauts d'itinéraire et transmettre des paramètres ?Article suivant：Comment configurer le routage Vue3, effectuer des sauts d'itinéraire et transmettre des paramètres ?

Articles Liés

Voir plus