Bagaimana untuk melaksanakan peralihan berperingkat dalam vue

Kaedah Vue untuk melaksanakan peralihan berperingkat: 1. Buka fail vue yang sepadan 2. Gunakan komponen kumpulan peralihan untuk mengendalikan komponen peralihan pada setiap elemen dalam senarai yang dibalut menambah kelewatan yang berbeza.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Bagaimana untuk merealisasikan peralihan vue yang berperingkat?

Senarai Vue peralihan berperingkat

Berdasarkan pada vue, anda perlu menggunakan dan memahami Bagaimana untuk melaksanakan peralihan berperingkat dalam vue dan Bagaimana untuk melaksanakan peralihan berperingkat dalam vue-group vue.

peralihan

Dokumentasi Vue sudah mempunyai transtionanalisis komponen yang sangat terperinci.

Berikut adalah pemahaman saya:

transtion ialah komponen abstrak yang disediakan oleh vue, yang akan membantu kami mengendalikan sub-elemen yang dibalutnya pada masa yang sesuai.

Masa yang sesuai ialah:

1. beforeEnter Bingkai di mana dom dijana daripada js dan baru dimasukkan ke dalam halaman (bersamaan dengan permulaan animasi dalam gambar di bawah )
2. enter Bingkai seterusnya selepas dom dimasukkan ke dalam halaman (bersesuaian dengan animasi dalam gambar di bawah)
3. afterEnter Bingkai seterusnya selepas animasi dom selesai (bersamaan hingga akhir animasi dalam gambar di bawah)

kumpulan peralihan

ransition-group komponen akan berfungsi operasi komponen transtion dalam kelompok untuk setiap elemen dalam senarai berpakej.

html
<div>
    <bagaimana untuk melaksanakan peralihan berperingkat dalam vue-group>
        <item></item>
    </bagaimana>untuk melaksanakan peralihan berperingkat dalam vue-group>
</div>

css.list-enter {    opacity: 0;    transform: translateY(100%);
}.list-enter-active {    Bagaimana untuk melaksanakan peralihan berperingkat dalam vue: .3s;
}/* enter-to其实可以不用写, 没有显性写明，就是默认的opacity: 1;transform: none;  */.list-enter-to {    opacity: 1;    transform: translateY(0);
}

Seterusnya, tambahkan kelewatan yang berbeza pada setiap item senarai.

tunda-peralihan

css.list-enter-active:nth-child(5n+2) {    Bagaimana untuk melaksanakan peralihan berperingkat dalam vue-delay: .3s;
}.list-enter-active:nth-child(5n+3) {    Bagaimana untuk melaksanakan peralihan berperingkat dalam vue-delay: .5s;
}.list-enter-active:nth-child(5n+4) {    Bagaimana untuk melaksanakan peralihan berperingkat dalam vue-delay: .7s;
}.list-enter-active:nth-child(5n+5) {    Bagaimana untuk melaksanakan peralihan berperingkat dalam vue-delay: .9s;
}复制代码

Menggunakan tunda-peralihan dengan pemilih css, peralihan berperingkat sememangnya boleh dicapai,

Tetapi kelemahannya juga jelas ia memerlukan penulisan css yang banyak dan ia tidak fleksibel untuk diubah suai.

Seterusnya kami menggunakan cangkuk JavaScript vue untuk melaksanakannya.

Bagaimana untuk melaksanakan peralihan berperingkat dalam vue

html<div>
    <!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测，让我们更好控制 动画完成的时机 -->
    <bagaimana untuk melaksanakan peralihan berperingkat dalam vue-group>

        <item></item>

    </bagaimana>untuk melaksanakan peralihan berperingkat dalam vue-group></div>复制代码

Apabila hanya JavaScript digunakan untuk peralihan, done mesti digunakan untuk panggilan balik dalam masuk dan keluar. Jika tidak, ia dipanggil serentak dan peralihan selesai serta-merta.

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

Setakat ini, ia berjalan dengan baik, mencapai kesan peralihan berperingkat, dan tidak perlu menulis banyak css.

Mengimbas kembali, kami melakukan 2 perkara secara keseluruhannya Kami menggunakan .list-enter .list-enter-to dan Bagaimana untuk melaksanakan peralihan berperingkat dalam vue

untuk memberitahu penyemak imbas untuk mengalihkan item senarai daripada opacity 0 translateY(100%) kepada , opacity 1 translateY(0) .

Beritahu penyemak imbas keadaan elemen yang berbeza Selain nama kelas,

kita boleh terus mengendalikan dom dan menulis gaya sebaris

Selain daripada menulis css sama sekali Selain nama kelas,

juga boleh mempunyai lebih banyak sifat terprogram.

gaya

html
<div>
        <bagaimana untuk melaksanakan peralihan berperingkat dalam vue-group>

            <item></item>

        </bagaimana>untuk melaksanakan peralihan berperingkat dalam 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.Bagaimana untuk melaksanakan peralihan berperingkat dalam vue.cssText = `Bagaimana untuk melaksanakan peralihan berperingkat dalam vue: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`;
        },        enter(dom,done) {
            let delay = dom.dataset.delay;            Bagaimana untuk melaksanakan peralihan berperingkat dalam vue(function () {
                dom.Bagaimana untuk melaksanakan peralihan berperingkat dalam vue.cssText = `Bagaimana untuk melaksanakan peralihan berperingkat dalam vue: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`;                //监听 Bagaimana untuk melaksanakan peralihan berperingkat dalam vueend 事件
                var Bagaimana untuk melaksanakan peralihan berperingkat dalam vueend = window.onBagaimana untuk melaksanakan peralihan berperingkat dalam vueend ? "Bagaimana untuk melaksanakan peralihan berperingkat dalam vueend" : "webkitTransitionEnd";
                dom.addEventListener(Bagaimana untuk melaksanakan peralihan berperingkat dalam vueend, function onEnd() {
                  dom.removeEventListener(Bagaimana untuk melaksanakan peralihan berperingkat dalam vueend, onEnd);                  done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
                });
            }, delay)
        },        afterEnter(dom) {
            dom.Bagaimana untuk melaksanakan peralihan berperingkat dalam vue.cssText = "";
        }
    }
})

Ya, itu bagus, tetapi kerana anda semua menggunakan js, satu-satunya orang yang boleh mengehadkannya ialah anda.

html
    <item></item>

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

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan peralihan berperingkat dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!