vue3进阶动画效果2-使用钩子函数

小小婷几

已于 2022-02-11 15:12:17 修改

阅读量669

点赞数

分类专栏： VUE3学习笔记文章标签：动画 javascript vue.js

于 2022-02-11 15:09:04 首次发布

本文链接：https://blog.csdn.net/qq_40128375/article/details/122880895

版权

VUE3学习笔记专栏收录该内容

15 篇文章 4 订阅

订阅专栏

1.补充知识：

1-1. type = animation/transition 如果动画和过渡的时间不一致，以type的值为准,也就是说如果type = animation，则动画和过渡的时间都以动画时间为准；

1-2. 也可以单独设置transiton，统一设置动画和过渡的时间；例如
<transition :duration="1000">
<transition :duration="{enter: 1000, leave: 3000}">

2.使用`js`定义动画

禁用css动画<transition :css="false">，设置css为false,通过js来写动画,在动画钩子函数中调用，动画钩子也分为入场和出场.

2-1. 入场钩子：
before-enter(el)：入场前，接收两个参数el(元素本身)、done()通知动画结束回调
enter(el, done)：入场时执行的函数；接收两个参数el(元素本身)、done()通知动画结束回调, 只有done()执行完毕才会通知transition组件执行after-enter钩子。详细使用会在下面举例。
after-enter(el)：入场后动画钩子

2-2. 出场钩子，同上：
before-leave(el)：出场前，接收两个参数el(元素本身)、done()通知动画结束回调
leave(el, done)：出场时执行的函数；接收两个参数el(元素本身)、done()通知动画结束回调
after-leave(el)：出场后动画钩子。

3.实例应用

<!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">
    <script src="http://unpkg.com/vue@next"></script>
    <title>Document</title>
</head>
<body>
 <div id="root"></div>
 <script>
     const app = Vue.createApp({
         template:`
             <div>
                 <transition 
                     :css="false"
                     @before-enter="handleBeforeEnter"
                     @enter="handleEnter"
                     @after-enter="handleAfterEnter"
                     >
                     <div v-show="show">动画效果</div>
                 </transition>
                 <a href="#" @click="handleClick">点击切换</a>
             </div>
         `,
         data() {
             return {
                 show: true
             }
         },
         methods: {
             // 入场前：
             handleBeforeEnter(el){
                 el.style.backgroundColor = "lightblue"
             }, 
             // 入场时：
             handleEnter(el, done){
                 const animation = setInterval(() => {
                     if (el.style.backgroundColor == 'lightblue') {
                         el.style.backgroundColor = "orange"
                     } else {
                         el.style.backgroundColor = "lightblue"
                     }
                 }, 300);
                 
                 setTimeout(() => { // 5s后清除动画
                     clearInterval(animation)
                     done(); // 告知入场动画执行完毕
                 }, 3000);
             }, 
             // 入场后：
             handleAfterEnter(el){
                 el.style.backgroundColor = ""
                 el.style.color = "red"
             }, 
             handleClick() {
                 this.show = !this.show
             }
         },
     })
     app.mount('#root');
 </script>
</body>
</html>