43 JS+Vue3制作动画和钩子函数

àì夳堔傛蜴生んèń 2023-10-06 20:42 18阅读 0赞

#### \[动画\] JS+Vue3制作动画和钩子函数 ####

*  阐述
 *  指定不使用CSS动画
 *  使用JS编写动画效果
 *   *  before-enter 钩子函数
     *  enter 钩子函数
     *  after-enter 钩子函数

## 阐述 ##

有时候我们不使用CSS制作动画，而使用JS来制作动画。

虽然CSS的动画比JS的效率要高，但JS在操作DOM和时间控制上有着优势。所以这节我们就来学习一下如何使用JavaScript+Vue3来制作动画。

## 指定不使用CSS动画 ##

如果不使用CSS动画，需要在 `<transition>` 标签上加入 `:css="false"`。

加上这个绑定属性的意思就是，我不再使用CSS作为动画了。可以到浏览器中看一下，此时的动画效果已经不在起作用。

此时CSS的动画没有用处了，你可以进行删除。

## 使用JS编写动画效果 ##

Vue为了能让我们使用JS动画效果，为我们提供了一些钩子函数。所谓钩子函数 ，就是在某一时刻会被自动调用的函数（类似之前我们讲的生命周期函数）。

### before-enter 钩子函数 ###

先来看第一个钩子函数 `before-enter`，在动画开始前执行的函数。我们给这个钩子，绑定一个方法，比如这个方法叫做 `handleBeforeEnter`。

<transition :css="false" @before-enter="handleBeforeEnter">
        <div v-if="isShow">willem</div>
    </transition>

写好钩子函数后，再编写对应的方法 `handleBeforeEnter`。

注意，这个方法接收一个参数 `element`,这个参数就是动画的DOM元素，有了它你就可以操作动画了。

现在程序的意思是在动画开始前，把字体颜色变为红色。

![在这里插入图片描述][eacb4499ab63475eab08ae5b190401af.gif_pic_center]

### enter 钩子函数 ###

当动画进入时，可以使用钩子函数 `enter`。这里我们作一个如果字体是红色，就变成绿色；如果是绿色就变成红色的效果，并且是半秒钟变化一次。

在 `template` 的 `<transition>` 标签里加入 `enter` 钩子函数。

编写钩子函数的业务逻辑。

handleEnterActive(element,done){
        
        setInterval(()=>{
        
            const color=element.style.color;
            if(color=='red'){
        
                element.style.color ="green"
            }else{
        
                element.style.color="red"
            }
        },500)
    }

但现在如何让这个动画停下来那？  
其实这个还是比较麻烦的。需要先为 `setInterval` 指定一个变量 `animation`，然后使用`setTimeout`在`1500`毫秒后停止这个动画。

handleEnterActive(element,done){
        
        const animation=setInterval(()=>{
        
            const color=element.style.color;
            if(color=='red'){
        
                element.style.color ="green"
            }else{
        
                element.style.color="red"
            }
        },500)
        setTimeout(()=>{
        
            clearInterval(animation)
        },1500)
    }

此时在到浏览器中进行预览就可以看到，动画停止了。那我们再来说说 `done` 参数的作用，其实 `done` 相当于得知动画执行结束后通知执行下一个钩子函数 `after-enter`,如果不通知无法进入下一个钩子函数。

![在这里插入图片描述][b35f0e7132b9491390aad846e875363f.gif_pic_center]

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <style>
            @keyframes comein{
          
                0%{
          
                    transform :translateX(-120px)
                }
                100%{
          
                    transform :translateX(0px)
                }
            }
            @keyframes comeout{
          
                0%{
          
                    transform :translateX(0px)
                }
                100%{
          
                    transform :translateX(-120px)
                }
            }
            .v-enter-active{
          
                animation: comein 1s;
            }
            .v-leave-active{
          
                animation: comeout 1s;
            }
    
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    isShow:false
                }
            },
            methods:{
          
                hanldClick(){
          
                    this.isShow = ! this.isShow
                },
                handleEnterActive(element,done){
          
                    const animation=setInterval(()=>{
          
                        const color=element.style.color;
                        if(color=='red'){
          
                            element.style.color ="green"
                        }else{
          
                            element.style.color="red"
                        }
                    },500)
                    setTimeout(()=>{
          
                        clearInterval(animation)
                    },1500)
                }
            },
            template: `  
            <transition 
                :css="false" 
                @before-enter="handleBeforeEnter"
                @enter="handleEnterActive"
            >
                <div v-if="isShow">willem</div>
            </transition>
            <button @click="hanldClick">切换动画</button>
    
            `
        })
        const vm = app.mount("#app")
    </script>
    </html>

### after-enter 钩子函数 ###

这个钩子函数是当动画结束时执行的。  
比如我们想在动画结束后弹出一个`alter`对象，就可以先写一个`after-enter`钩子函数，然后利用`enter`钩子中的`done`进行通知它动画执行结束。

然后在 `handleEnterActive` 的 `clearInterval` 后面使用 `done()`进行通知。

setTimeout(()=>{
        clearInterval(animation)
        done()
    },1500)

这时候才会执行 `handleEnterEnd` 里边的方法，弹出对话框。

handleEnterEnd(){
        
        alert('willem.com')
    }

这里我们只学了入场动画的钩子函数，当然还有三个出场动画的钩子函数。

`before-leave :` 离场动画执行之前  
`leave：` 开始执行离场动画  
`leave-after:`离场动画执行结束

离场动画我们就不讲了，你可以自己试一下就可以了。

为了方便大家学习，附上本节代码：

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <style>
            @keyframes comein{
          
                0%{
          
                    transform :translateX(-120px)
                }
                100%{
          
                    transform :translateX(0px)
                }
            }
            @keyframes comeout{
          
                0%{
          
                    transform :translateX(0px)
                }
                100%{
          
                    transform :translateX(-120px)
                }
            }
            .v-enter-active{
          
                animation: comein 1s;
            }
            .v-leave-active{
          
                animation: comeout 1s;
            }
    
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    isShow:false
                }
            },
            methods:{
          
                hanldClick(){
          
                    this.isShow = ! this.isShow
                },
                handleEnterEnd(){
          
                    alert('willem.com')
                },
                handleEnterActive(element,done){
          
                    const animation=setInterval(()=>{
          
                        const color=element.style.color;
                        if(color=='red'){
          
                            element.style.color ="green"
                        }else{
          
                            element.style.color="red"
                        }
                    },500)
    
                    setTimeout(()=>{
          
                        clearInterval(animation)
                    },1500)
    
                    setTimeout(()=>{
          
                        clearInterval(animation)
                        done()
                    },1500)
                }
            },
            template: `  
            <transition 
                :css="false" 
                @before-enter="handleBeforeEnter"
                @enter="handleEnterActive"
                @after-enter="handleEnterEnd"
            >
                <div v-if="isShow">willem</div>
            </transition>
            <button @click="hanldClick">切换动画</button>
    
            `
        })
        const vm = app.mount("#app")
    </script>
    </html>

![在这里插入图片描述][906857dec0384a14b0a7ab43e641925f.gif_pic_center]

[eacb4499ab63475eab08ae5b190401af.gif_pic_center]: https://img-blog.csdnimg.cn/eacb4499ab63475eab08ae5b190401af.gif#pic_center
[b35f0e7132b9491390aad846e875363f.gif_pic_center]: https://img-blog.csdnimg.cn/b35f0e7132b9491390aad846e875363f.gif#pic_center
[906857dec0384a14b0a7ab43e641925f.gif_pic_center]: https://img-blog.csdnimg.cn/906857dec0384a14b0a7ab43e641925f.gif#pic_center