vue动画原理

叁歲伎倆 2022-05-11 10:00 168阅读 0赞

Vue 提供了 `transition` 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

*  条件渲染 (使用 `v-if`)
 *  条件展示 (使用 `v-show`)
 *  动态组件
 *  组件根节点

注意：

transition标签中只能包裹一个元素，否则会报错：

![70][]

当出现多个元素需要执行一组过渡时，需使用<transition-group>

### 过渡原理： ###

在动画执行的过程中，vue在不同时刻向标签上动态的增加与删除一些class属性，实现动画过渡的效果。

![70 1][]

当元素从隐藏到显示的过程中，其过程如下图所示：

![70 2][]

### 过渡的类名： ###

在进入/离开的过渡中，会有 6 个 class 切换。

1.  `v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.  `v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3.  `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在过渡/动画完成之后移除。
4.  `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.  `v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6.  `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在过渡/动画完成之后移除。

### 样例代码： ###

<!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>过渡</title>
        <style>
            .fade-enter{
                opacity: 0;
            }
            .fade-enter-active{
                transition: opacity 1s;
            }
            .fade-leave-to{
                opacity: 0;
            }
            .fade-leave-active{
                transition: opacity 1s;
            }
        </style>
    </head>
    
    <body>
        <div id="root">
            <transition name="fade">
                <h1 v-if="show">toggle</h1>
            </transition>
            <button @click="toggleShow">点我</button>
    
        </div>
        <script src="../vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#root',
                data:{
                    show: true
                },
                methods:{
                    toggleShow: function(){
                        this.show = !this.show;
                    }
                }
            })
        </script>
    </body>
    
    </html>

[70]: /images/20220511/a83ba4c1bc2545b289c3d95b606d3a6b.png
[70 1]: /images/20220511/3b953e8efaca4589ab78cf97b92c486a.png
[70 2]: /images/20220511/22caa04053694b60a2eeeccc042814e1.png