So wenden Sie Vue3-Listenanimationen und Zustandsanimationen an-View.js-php.cn

So wenden Sie Vue3-Listenanimationen und Zustandsanimationen an

王林

Freigeben： 2023-05-22 09:43:19

nach vorne

1314 Leute haben es durchsucht

Übersicht

Listenanimation und Statusanimation sind beide Möglichkeiten, das Benutzererlebnis zu verbessern, wenn einer Liste Daten hinzugefügt oder entfernt werden Wenn Daten direkt hinzugefügt und plötzlich angezeigt werden, ist dies etwas abrupt und der Benutzer weiß möglicherweise nicht, dass Daten zu diesem Zeitpunkt hinzugefügt wurden. Das Gleiche gilt für das Entfernen von Daten aus der Liste Ich weiß nicht, welche Daten entfernt wurden. Interessante Animationen sind sehr attraktiv und können Benutzern helfen, auf die neuen und entfernten Daten aufmerksam zu machen, sodass das Hinzufügen von Animationen das Benutzererlebnis verbessern kann. Dies ist eine Listenanimation, und die Zustandsanimation bezieht sich auf den Wechsel von einem Zustand in einen anderen. Wenn Sie ihn direkt ändern, sieht er steif aus, aber es ist viel besser, wenn Sie eine Animation für einen langsamen Übergang hinzufügen.

Beispielanalyse

Animation auflisten

So wenden Sie Vue3-Listenanimationen und Zustandsanimationen an

Wie im Bild oben gezeigt, wollen wir Zahlenzusammensetzung anzeigen In der Liste gibt es rechts eine Schaltfläche, um eine Animation zum Erhöhen der Zahl auszuführen. Der Code lautet wie folgt:

rrree

Wir verwenden zunächst CSS, um den Animationseffekt der Liste zu definieren. Ich werde hier nicht auf Details eingehen Für die Animation definieren wir sie in der Vue-Vorlage. Verwenden Sie einen Bereich, um unsere Zahlenliste anzuzeigen. Das Wichtigste ist, dass wir den Teil, den wir animieren möchten, mit dem Tag <transition-group></transition-group> umschließen. Wenn wir auf die Schaltfläche klicken, wird die js-Funktion ausgeführt, um der Liste eine Zahl mit der Länge der Liste plus eins hinzuzufügen. Leser können den Animationseffekt anzeigen, indem sie ihn ausführen.

Zustandsanimation

So wenden Sie Vue3-Listenanimationen und Zustandsanimationen an

Zustandsanimation ist relativ einfach, nämlich das Hinzufügen einiger Übergangswerte von einem Zustand zum anderen Es steuert hauptsächlich die Anzeige von Inhalten durch Daten, z. B. den Wechsel von 1 auf 10. Wenn sich 1 sofort in 10 ändert, sieht es sehr steif aus, aber in der Mitte werden andere Zahlen hinzugefügt, z. B. 2, 3, 4. . und schließlich wird es viel besser sein. Der Code ist 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>列表动画</title>
    <style>
        .list-item{
            display: inline-block;
            margin-right: 10px;
        }
        .v-enter-from{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active{
            transition: all 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
            transform: translateY(0px);
        }
        .v-move{
            transition: 2.5s ease-in;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
               list:[1,2,3]
            }
        },
        methods: {
            handleClick(){
               this.list.unshift(this.list.length+1);
            }
        },
        template: 
        `
            <div>
                <transition-group>
                <span class="list-item" v-for = "item in list" :key="item">{{item}}</span>
                </transition-group>
                <button @click="handleClick">add</button> 
            </div>
        `
    });
    const vm = app.mount(&#39;#root&#39;);
</script>

Nach dem Login kopieren

Die Listenanimation ist relativ einfach, wir verwenden die js-Funktion, um die aktuell angezeigte Datei zu ändern Wert alle 100 Millisekunden, bis der Wert schließlich den gewünschten Zustandswert erreicht.

Das obige ist der detaillierte Inhalt vonSo wenden Sie Vue3-Listenanimationen und Zustandsanimationen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!