suchen

Heim >Web-Frontend >View.js >Wie implementiert man Animationen in Vue3 mit JavaScript?

Wie implementiert man Animationen in Vue3 mit JavaScript?

WBOY
WBOYnach vorne
2023-05-09 23:34:061165Durchsuche

Übersicht

Animationen können tatsächlich nicht nur mit CSS, sondern auch mit js implementiert werden. Was ist der Unterschied zwischen den beiden? CSS schenkt der Anzeige von Animationen mehr Aufmerksamkeit und weist eine bessere Leistung auf, während die Leistung der js-Methode etwas schlechter ist, sie jedoch in jedem Prozess der Animationsausführung zusätzliche Vorgänge ausführen kann. Das heißt, der Prozess der Animationsausführung vom Anfang über die Ausführung bis zum Ende. Wenn Sie dafür CSS verwenden, können Sie höchstens die Eigenschaften der Animation steuern, nur um die Animation anzuzeigen. Mit js können wir das dom-Element zu Beginn der Animationsausführung bedienen und die gewünschten Effekte hinzufügen. Wenn die Animationsausführung endet, können wir einige Operationen zum Beenden der Animation ausführen, z. B. das Öffnen eines Dialogfelds oder ähnliches. Es ist bequemer, diese mit js zu implementieren.

Beispielanalyse

Angenommen, wir möchten einen Effekt erzielen: Lassen Sie die Schriftfarbe von „Hallo Welt“ einmal pro Sekunde zwischen Rot und Grün wechseln, enden Sie nach 5 Sekunden und öffnen Sie nach dem Ende ein Dialogfeld, um a anzuzeigen Inhaltsteil, Code Wie folgt: 

<!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>

Aus dem obigen Code können wir ersehen, dass wir im Übergangs-Tag :css = "false" verwenden. Dies liegt daran, dass wir js für die Animation verwenden möchten Wir müssen es zuerst per CSS deaktivieren und dann @before-enter="handleBeforeEnter", @enter="handleEnterActive" und @after-enter implementieren. code> entsprechend den Animationen. Vor dem Start wird die Animation ausgeführt und die Animation endet mit den folgenden drei Funktionen: <code>handleBeforeEnter, handleEnterActive und handleEnterEnd sind js, die den drei Stufenfunktionen entsprechen. Wir können die Operationen ausführen, die wir in diesen Funktionen ausführen möchten. In diesem Beispiel: :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

Bevor die Animation ausgeführt wird, setzen wir die Farbe des Texts auf Rot🎜🎜Wenn die Animation ausgeführt wird🎜rrreee🎜Wenn die Animation ausgeführt wird, bestimmen wir alle 1 Sekunde die Farbe des aktuellen Textes. Wenn es rot ist, wechseln Sie zu Grün. Wenn es grün ist, wechseln Sie zu Rot und fahren Sie dann 5 Sekunden lang fort. 🎜🎜Wenn die Animation endet🎜rrreee🎜Nachdem die Animation endet, wird handleEnterEnd ausgeführt und dann wird ein Dialogfeld mit der Anzeige 123.🎜 angezeigt

Das obige ist der detaillierte Inhalt vonWie implementiert man Animationen in Vue3 mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css JS dom transition
Stellungnahme：
Dieser Artikel ist reproduziert unter:yisu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie konfiguriere ich das Vue3-Routing, führe Routensprünge durch und übergebe Parameter?Nächster Artikel：Wie konfiguriere ich das Vue3-Routing, führe Routensprünge durch und übergebe Parameter?

In Verbindung stehende Artikel

Mehr sehen