Vue中的css过渡效果

一、概念

1. 实现条件：在需要有过渡效果的标签外面添加<transition></transition>。也就是说vue中被<transition></transition>包裹的元素才能实现过渡效果。

2. 注意
类名的说明：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
opacity的说明：在过渡动画的显示和隐藏会用opacity属性来表征。opacity:1 不透明（显示）| opacity:0 透明（不显示）

3. 原理
vue在加了<transition>标签的元素提供了三个进入过渡的类，和三个离开过渡的类。

进入过渡	离开过渡
.v-enter：定义进入过渡的开始状态	.v-leave：定义离开过渡的开始状态
.v-enter-to：定义进入过渡的结束状态	.v-leave-to：定义离开过渡的结束状态
.v-enter-active：定义进入过渡生效时的状态	.v-leave-active：定义离开过渡生效时的状态

4. 这6个类的生效时间
对于进入动画来说：

.v-enter	. v-enter-to	. v-enter-active
定义过渡的开始状态	定义过渡的结束状态	定义过渡生效时的状态
插入之前生效	插入之后下一帧生效（同时 v-enter 被移除）	动画整个过程生效
下一帧被移除	动画完成之后移除	动画整个过程生效

对于离开动画来说：

.v-leave	.v-leave-to	.v-leave-active
定义过渡的开始状态	定义过渡的结束状态	定义过渡生效时的状态
离开过渡被触发时立刻生效	触发之后下一帧生效 (与此同时 v-leave 被删除）	整个离开过渡的阶段中应用
下一帧被移除	动画完成之后移除	整个离开过渡的阶段中应用

5. 原理图

image.png

二、代码示例

定义一个长方体div，在点击按钮显示时，让高度从0增长到200px。切换隐藏时，让高度从200px减少到0.

//一个命名为fade的<transition>标签包裹着类名为h的<div>
<transition name="fade">
    <div class="h" v-if="show">hello world</div>
</transition>

<style>
    /* div的初始状态*/
    .h {
        width:100px;
        height: 200px;
        background-color: aqua;
    }
-----------------------------------------------------------------------------------------
    /**
    * 定义进入动画和退出动画的过程
    * 代表关注的是height的变化，动画的时间是5
    */
    .fade-enter-active, .fade-leave-active {
        transition: height 5s;
    }

-----------------------------------------------------------------------------------------       
    /* 定义进入动画的初始状态*/
    .fade-enter {
        height: 0;
    }

    /* 定义进入动画的结束状态*/
    .fade-enter-to {
        height: 200px;
    }
-----------------------------------------------------------------------------------------

    /* 定义离开动画的初始状态*/
    .fade-leave {
        height: 200px;
    }

    /* 定义离开动画的结束状态*/
    .fade-leave-to {
        height: 0;
    }
</style>