Bagaimana untuk melaksanakan animasi dalam Vue3 menggunakan JavaScript?-View.js-php.cn

Bagaimana untuk melaksanakan animasi dalam Vue3 menggunakan JavaScript?

WBOY

Lepaskan： 2023-05-09 23:34:06

ke hadapan

1157 orang telah melayarinya

Ikhtisar

Animasi sebenarnya boleh dilaksanakan bukan sahaja menggunakan CSS, tetapi juga menggunakan js. Apakah perbezaan antara kedua-duanya? CSS memberi lebih perhatian kepada paparan animasi dan mempunyai prestasi yang lebih baik, manakala prestasi kaedah js sedikit lebih teruk, tetapi ia boleh melakukan operasi tambahan dalam setiap proses pelaksanaan animasi. Maksudnya, proses pelaksanaan animasi dari awal hingga pelaksanaan hingga akhir Jika anda menggunakan CSS untuk melakukannya, paling banyak anda boleh mengawal sifat animasi, hanya untuk memaparkan animasi. Menggunakan js, kita boleh mengendalikan elemen dom pada permulaan pelaksanaan animasi dan menambah kesan yang kita inginkan Apabila pelaksanaan animasi tamat, kita boleh melakukan beberapa operasi untuk menamatkan animasi, seperti muncul kotak dialog atau sesuatu. Lebih mudah untuk melaksanakan ini menggunakan js.

Analisis contoh

Andaikan kita ingin mencapai kesan: biarkan warna fon "hello world" bertukar antara merah dan hijau sekali sesaat, tamat selepas 5 saat, dan kemudian timbul Kotak dialog memaparkan sekeping kandungan Kodnya adalah seperti berikut:

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

Salin selepas log masuk

Daripada kod di atas kita dapat melihat bahawa kita menggunakan :css = "false" dalam teg peralihan ini kerana kita ingin menggunakan js untuk animasi , jadi kita mesti Lumpuhkan css dahulu, dan kemudian laksanakan masing-masing @before-enter="handleBeforeEnter", @enter="handleEnterActive" dan @after-enter, yang sepadan dengan sebelum animasi bermula, semasa pelaksanaan animasi dan pelaksanaan animasi tamat dan tiga fungsi berikut: handleBeforeEnter, handleEnterActive dan handleEnterEnd Ia adalah fungsi js yang sepadan dengan tiga peringkat Kami boleh melaksanakan operasi yang ingin kami lakukan dalam fungsi ini. Dalam contoh ini:

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

Salin selepas log masuk

Sebelum animasi dilaksanakan, kami menetapkan warna teks kepada merah

Apabila animasi dilaksanakan

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);
            }

Salin selepas log masuk

Apabila animasi dilaksanakan, kami menetapkannya selepas 1 saat Untuk menentukan warna teks semasa, jika merah, tukar kepada hijau, jika hijau, tukar kepada merah, dan kemudian teruskan selama 5 saat.

Apabila animasi tamat

handleEnterEnd(){
     alert(123);
}

Salin selepas log masuk

Selepas animasi tamat, handleEnterEnd akan dilaksanakan, dan kemudian kotak dialog akan muncul, menunjukkan 123.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi dalam Vue3 menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!