码云 Vue3教程 2021-05-27

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

AI 概述

指定不使用 CSS 动画使用 JS 编写动画效果before-enter 钩子函数enter 钩子函数after-enter 钩子函数有时候我们不使用 CSS 制作动画，而使用 JS 来制作动画。虽然 CSS 的动画比 JS 的效率要高，但 JS 在操作 DOM 和时间控制上有着优势。所以这节我们就来学习一下如何使用 JavaScript+Vue3 来制作动画...

文章目录隐藏

指定不使用 CSS 动画
使用 JS 编写动画效果

before-enter 钩子函数
enter 钩子函数
after-enter 钩子函数

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

指定不使用 CSS 动画

新建一个文件Demo43.html，代码如下。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</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
            }
        },
        template: `  
        <transition>
            <div v-if="isShow">码云笔记前端博客</div>
        </transition>
        <button @click="hanldClick">切换动画</button>

        `
    })
    const vm = app.mount("#app")
</script>

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

<transition :css="false">

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

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

使用 JS 编写动画效果

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

before-enter 钩子函数

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

<transition 
    :css="false" 
    @before-enter="handleBeforeEnter"
>
    <div v-if="isShow">码云笔记前端博客</div>
</transition>

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

handleBeforeEnter(element){
    element.style.color="red"
},

注意，这个方法接收一个参数element,这个参数就是动画的 DOM 元素，有了它你就可以操作动画了。现在程序的意思是在动画开始前，把字体颜色变为红色。

enter 钩子函数

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

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

<transition 
    :css="false" 
    @before-enter="handleBeforeEnter"
    @enter="handleEnterActive"
>

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

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,如果不通知无法进入下一个钩子函数。

after-enter 钩子函数

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

<transition 
    :css="false" 
    @before-enter="handleBeforeEnter"
    @enter="handleEnterActive"
    @after-enter="handleEnterEnd"
>

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

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

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

handleEnterEnd(){
    alert('mybj123.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>Mybj</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
            },
            handleBeforeEnter(element){
                element.style.color="red"
            },
            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)
                    done()
                },1500)
            },
            handleEnterEnd(){
                alert('mybj123.com')
            }
        },
        template: `  
        <transition
            :css="false"
            @before-enter="handleBeforeEnter"
            @enter="handleEnterActive"
            @after-enter="handleEnterEnd"
        >
            <div v-if="isShow">码云笔记前端博客</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
        `
    })
    const vm = app.mount("#app")
</script>

以上关于43. [动画]JS+Vue3制作动画和钩子函数的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 43. [动画]JS+Vue3制作动画和钩子函数