vue 过渡动画(transition) 个人理解

作者: 你是路上的光 | 来源:发表于2020-03-16 09:00 被阅读0次

vue 过渡动画(transition) 个人理解
vue03
Vue动画
vue中的三种动画引用方法
CSS3过渡动画
css动画过渡
CSS3动画
CSS动画相关
前端09
动画

版本:vue 2.x
实验对象：一个小demo

demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的简单过渡</title>
<script src="../vue.js"></script>
<style>

        #wrapper{
            border: 1px solid red;
            height: 200px;
            margin-top: 200px;
            position: relative;
            /* overflow: hidden; */
        }
        .title{
            position: absolute;
            left: 50%;
            top: 100px;
            background: blue;
            color: aliceblue;
            font-size: 20px;
            width: 300px;
            text-align: center;
            line-height: 100px; 
        }
       .fade-enter{
            opacity: 0;
            transform:  translateY(50px);
        }
        .fade-leave-to {
            opacity: 0;
            transform:  translateY(100px);
        }
        .fade-enter-active{
            transition: all .5s;
        }
        .fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

</style>
</head>
<body>

<div id="root">
    <div id="wrapper">
            <transition name="fade">
                <div v-if="show" class="title">hello world</div>
            </transition>
        </div>
        <button v-on:click="handleClick">
            Toggle
        </button>
</div>
    <script>
        new Vue({
            el: '#root',
            data: {
                show: true
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show
                }
            }
        })
    </script>

</body>
</html>

个人理解：
先出现enter还是leave，由初始显隐状态决定:
如果目标元素刚开始时时隐藏，那么demo效果的会按照先后顺序，出现有两个阶段：1阶段：隐藏->显示此乃enter; 2阶段显示->隐藏此乃leave。故先出现enter，再出现leave
如果目标元素刚开始时时显示，那么demo效果的会按照先后顺序，出现有两个阶段：1阶段：显示->隐藏此乃leave; 2阶段隐藏->显示此乃enter。故先出现leave，再出现enter
以本demo为例,更改show的值分别为true或false。观察出现的效果。

为什么opacity可以控制显隐，个人理解:
由于v-show控制的，实际是display属性在产生作用，如display:none.（但是display:none 和 transition是冲突的。有display:none则不会出现过渡效果）。可是正在使用的明明是v-show，咋办呢？那么所以，要在隐藏->显示或显示->隐藏的过程的第二帧就要给加上一个class。这个class就是v-enter或v-leave. 而这两个class里均有opacity属性。于是乎,就替换了display。此时class 名为v-enter-active或v--leave-active里的transition属性通过opacity或all检测到有opacity，并监听opacity的变化。当opacity的值发生变化，于是transition产生设定的过渡效果了。此时，整个过程的显隐变成了opacity来控制;

位移效果是以目标元素初始位置决定的：
以本demo为例，enter阶段的位移是指从何处移动到当前位置。leave阶段的位置是指从当前位置移动到何处

本demo总结描述：
-1,如果show的值是false.当点击Toggle按钮时，则先出现enter阶段，再出现leave阶段。在enter阶段的第二帧添加fade-enter的样式,显隐开始交由opacity控制变化,opacity值的走向是0->1,从下方50px处回到初始位置，fade-enter-active里的transform监听到opacity和translateY变化，应用过渡效果
-2，如果show的值是false.当点击Toggle按钮时，则先出现leave阶段，再出现enter阶段。在leave阶段的第二帧添加fade-leave-to的样式,显隐开始交由opacity控制,opacity值的走向是1->0,从初始位置处移到下方100px，fade-leave-active里的transform监听到opacity和translateY变化，应用过渡效果