So implementieren Sie einen gestaffelten Übergang in Vue

Vue implementiert gestaffelte Übergangsmethoden: 1. Öffnen Sie die entsprechende Vue-Datei. 2. Verwenden Sie die Übergangsgruppenkomponente, um die Übergangskomponente für jedes Element in der gepackten Liste auszuführen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Wie implementiert man einen gestaffelten Übergang in Vue?

Vues gestaffelte Übergangsliste

basiert auf Vue, was erfordert, dass Sie Erfahrung mit Vues So implementieren Sie einen gestaffelten Übergang in Vue und So implementieren Sie einen gestaffelten Übergang in Vue-grouphaben > Nutzen und verstehen. So implementieren Sie einen gestaffelten Übergang in Vue 和 So implementieren Sie einen gestaffelten Übergang in Vue-group有过使用和了解。

So implementieren Sie einen gestaffelten Übergang in Vue

vue的文档对 transtion 组件已经有了很详细的 分析 了。

这里说一下我的理解：

transtion 是vue提供的一个抽象组件，会在 合适的时机 帮我们操作其包裹的子元素。

这个合适的时机是：

1. beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)
2. enter dom 插入页面之后的 下一帧(对应下图的动画中)
3. afterEnter dom 动画完成之后的 下一帧(对应下图的动画结束)

So implementieren Sie einen gestaffelten Übergang in Vue-group

ransition-group组件 会对包裹的列表中每一个元素批量进行 transtion组件 的操作。

html
<div>
    <so implementieren sie einen gestaffelten in vue-group>
        <item></item>
    </so>implementieren Sie einen gestaffelten Übergang in Vue-group>
</div>

css.list-enter {    opacity: 0;    transform: translateY(100%);
}.list-enter-active {    So implementieren Sie einen gestaffelten Übergang in Vue: .3s;
}/* enter-to其实可以不用写, 没有显性写明，就是默认的opacity: 1;transform: none;  */.list-enter-to {    opacity: 1;    transform: translateY(0);
}

接下来给 每个列表项 加上不同 延时 即可。

So implementieren Sie einen gestaffelten Übergang in Vue-delay

css.list-enter-active:nth-child(5n+2) {    So implementieren Sie einen gestaffelten Übergang in Vue-delay: .3s;
}.list-enter-active:nth-child(5n+3) {    So implementieren Sie einen gestaffelten Übergang in Vue-delay: .5s;
}.list-enter-active:nth-child(5n+4) {    So implementieren Sie einen gestaffelten Übergang in Vue-delay: .7s;
}.list-enter-active:nth-child(5n+5) {    So implementieren Sie einen gestaffelten Übergang in Vue-delay: .9s;
}复制代码

用 So implementieren Sie einen gestaffelten Übergang in Vue-delay 配合 css选择器，确实可以实现So implementieren Sie einen gestaffelten Übergang in Vue，

但是缺点也很明显，要写大量的 css ，修改起来也不灵活。

接下来我们用vue的 JavaScript钩子 来实现。

So implementieren Sie einen gestaffelten Übergang in Vue

html<div>
    <!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测，让我们更好控制 动画完成的时机 -->
    <so implementieren sie einen gestaffelten in vue-group>

        <item></item>

    </so>implementieren Sie einen gestaffelten Übergang in Vue-group></div>复制代码

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

new Vue({    el: "#app",    data: () => ({        num: 0
    }),    methods: {        //让我们在 beforeEnter enter afterEnter 钩子里，把 vue 帮我们做的事，自己做一遍:
        //添加移除 class 类名，监听 So implementieren Sie einen gestaffelten Übergang in Vueend 事件。
        beforeEnter(dom) {
            dom.classList.add('list-enter', 'list-enter-active');
        },        enter(dom,done) {            let delay = dom.dataset.delay;            So implementieren Sie einen gestaffelten Übergang in Vue(function () {
                dom.classList.remove('list-enter');
                dom.classList.add('list-enter-to');                //监听 So implementieren Sie einen gestaffelten Übergang in Vueend 事件
                var So implementieren Sie einen gestaffelten Übergang in Vueend = window.onSo implementieren Sie einen gestaffelten Übergang in Vueend ? "So implementieren Sie einen gestaffelten Übergang in Vueend" : "webkitTransitionEnd";
                dom.addEventListener(So implementieren Sie einen gestaffelten Übergang in Vueend, function onEnd() {
                  dom.removeEventListener(So implementieren Sie einen gestaffelten Übergang in Vueend, onEnd);                  done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
                });
            }, delay)
        },        afterEnter(dom) {
            dom.classList.remove('list-enter-to', 'list-enter-active');
        }
    }
})复制代码

目前来说，运行良好，实现了So implementieren Sie einen gestaffelten Übergang in Vue的效果，也不用写大量的 css。

回头看看我们一共做了2件事，用 .list-enter .list-enter-to 和 So implementieren Sie einen gestaffelten Übergang in Vue

告诉浏览器，在不同的时间把列表项，从opacity 0 translateY(100%) 过渡到，opacity 1 translateY(0)

So implementieren Sie einen gestaffelten Übergang in Vue

vues Dokumentation enthält bereits sehr detaillierte Informationen zur transtion-KomponenteAnalyse

.

Hier ist mein Verständnis:

transtion ist eine von Vue bereitgestellte abstrakte Komponente, die uns dabei hilft, die umschlossenen Unterelemente zum richtigen Zeitpunkt zu bedienen.

Dieser geeignete Zeitpunkt ist:

1. beforeEnter dom wird aus js generiert und der Frame wurde gerade in die Seite eingefügt (entsprechend dem Beginn der Animation im Bild unten) li>
2. enter dom ist der nächste Frame nach dem Einfügen in die Seite (entsprechend der Animation unten)
3. afterEnter dom ist der nächste Frame nachdem die Animation abgeschlossen ist (entsprechend dem Ende der Animation im Bild unten)

So implementieren Sie einen gestaffelten Übergang in Vue-group

ransition-group Komponente wird Führen Sie eine Stapelverarbeitung für jedes Element in der umschlossenen Liste durch. Die Operation der transtion-Komponente.

html
<div>
        <so implementieren sie einen gestaffelten in vue-group>

            <item></item>

        </so>implementieren Sie einen gestaffelten Übergang in Vue-group>
    </div>

new Vue({
    el: "#app",
    data: () => ({
        num: 0
    }),
    methods: {        beforeEnter(dom) {
            let { x = 0, y = 0, s = 1, opacity = 0 } = dom.dataset;
            dom.So implementieren Sie einen gestaffelten Übergang in Vue.cssText = `So implementieren Sie einen gestaffelten Übergang in Vue: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`;
        },        enter(dom,done) {
            let delay = dom.dataset.delay;            So implementieren Sie einen gestaffelten Übergang in Vue(function () {
                dom.So implementieren Sie einen gestaffelten Übergang in Vue.cssText = `So implementieren Sie einen gestaffelten Übergang in Vue: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`;                //监听 So implementieren Sie einen gestaffelten Übergang in Vueend 事件
                var So implementieren Sie einen gestaffelten Übergang in Vueend = window.onSo implementieren Sie einen gestaffelten Übergang in Vueend ? "So implementieren Sie einen gestaffelten Übergang in Vueend" : "webkitTransitionEnd";
                dom.addEventListener(So implementieren Sie einen gestaffelten Übergang in Vueend, function onEnd() {
                  dom.removeEventListener(So implementieren Sie einen gestaffelten Übergang in Vueend, onEnd);                  done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
                });
            }, delay)
        },        afterEnter(dom) {
            dom.So implementieren Sie einen gestaffelten Übergang in Vue.cssText = "";
        }
    }
})

Als nächstes fügen Sie einfach jedem Listenelement unterschiedliche Verzögerungen hinzu.

So implementieren Sie einen gestaffelten Übergang in Vue-delay

html
    <item></item>

🎜🎜🎜Mit der Übergangsverzögerung mit dem CSS-Selektor können Sie tatsächlich gestaffelte Übergänge erzielen, 🎜🎜 aber die Nachteile liegen auch auf der Hand, Sie müssen viel schreiben CSS, und es ist schwierig zu ändern. 🎜🎜Als nächstes verwenden wir den JavaScript-Hook von vue, um ihn zu implementieren. 🎜

So implementieren Sie einen gestaffelten Übergang in Vue🎜

getRandom() {    var rate = Math.floor(Math.random() * 90 + 10);    return Math.random() > 0.5 ? rate : -1 * rate;
}

🎜🎜Wenn für den Übergang nur JavaScript verwendet wird, muss done für Rückrufe in Enter und Leave verwendet werden. Andernfalls werden sie synchron aufgerufen und der Übergang wird sofort abgeschlossen. 🎜🎜rrreee🎜🎜🎜🎜 🎜Bisher läuft es gut und erzielt den Effekt eines gestaffelten Übergangs, und es besteht keine Notwendigkeit, viel CSS zu schreiben. 🎜🎜Rückblickend haben wir insgesamt zwei Dinge getan: .list-enter .list-enter-to und So implementieren Sie einen gestaffelten Übergang in Vue🎜🎜, um dem Browser zu unterschiedlichen Zeitpunkten den Übergang mitzuteilen das Listenelement von opacity 0 translatorY(100%) bis opacity 1 translatorY(0). 🎜🎜 Teilen Sie dem Browser die verschiedenen Zustände der Elemente mit 🎜🎜 können wir den Dom direkt bedienen und den Stil inline schreiben 🎜🎜 Außerdem müssen wir den CSS-Klassennamen überhaupt nicht schreiben 🎜🎜 kann auch mehr Programmierbarkeit haben. 🎜🎜Stil🎜rrreeerrreee🎜🎜🎜🎜🎜🎜Ja, ja, aber da alles in JS ist, ist das Einzige, was eingeschränkt werden kann, Ihre Vorstellungskraft. 🎜rrreeerrreee🎜🎜🎜🎜Empfohlenes Lernen: „🎜vue.js Video-Tutorial🎜“🎜🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen gestaffelten Übergang in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!