首頁 > 文章 > web前端 > 怎麼用JavaScript在Vue3中實作動畫？

怎麼用JavaScript在Vue3中實作動畫？

WBOY轉載: 2023-05-09 23:34:061135瀏覽

概述

動畫的實現其實不僅可以使用CSS的方式實現，而且還可以使用js的方式實現，二者有啥區別呢？ CSS更加重視動畫的展現，性能更好，而js的方式性能稍微差點，但是可以在動畫執行的每個過程中做些額外的操作。也就是說動畫執行的開始-執行中-結束這個過程，如果使用CSS來做，最多也就是控制下動畫的屬性啥的，只是為了展示動畫。而使用js的方式，我們可以在動畫執行開始時，操作dom元素，加上我們想要的效果啥的，動畫執行結束時我們可以做一些動畫結束的操作，例如彈個對話框啥的。這些使用js實作都會比較方便。

實例解析

假設我們要實現一個效果：讓「hello world」的字體顏色在紅色和綠色之間一秒改變一次，5秒後結束，然後結束後彈出一個對話框，展示一段內容，程式碼如下：

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

從上面的程式碼我們可以看到，在transition標籤中我們使用了: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);
}

動畫結束後，會執行handleEnterEnd，然後彈出一個對話框，顯示123.

以上是怎麼用JavaScript在Vue3中實作動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css JS dom transition

陳述：

本文轉載於：yisu.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何配置Vue3的路由和進行路由跳轉並傳遞參數？下一篇：如何配置Vue3的路由和進行路由跳轉並傳遞參數？

看更多