Vue动画

发表于

Vue动画组件 transition

Vue的动画是由标签 transition 组成，一个基本的 transition 组件

1
2
3
4
<transition name="fade">
    运动的东西（元素、属性、路由）
</transition>
<!-- 标签中定义动画的名称，用来规划动画的状态 -->

class的定义

1
2
3
4
.fade-enter{ }          初始状态
.fade-enter-active{ }   变化成什么样    ->   当元素出来(显示)
.fade-leave{ }          消失前状态
.fade-leave-active{ }   最后变成什么样  ->   当元素离开（消失）

例子

1
2
3
4
5
6
<div id="box">
    <input type="button" value="点击显示隐藏" @click="show=!show">
    <transition name="fade">
        <p v-show="show"></p>
    </transition>
</div>
1
2
3
4
5
6
7
8
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
            show:false
        }
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
p{
    width:300px;
    height:300px;
    background: red;
}
.fade-enter{
    opacity:0;
    width:100px;
    height:100px;
}
.fade-enter-active{
    opacity:1;
    width:300px;
    height:300px;
}
.fade-leave-active{
    opacity:0;
    width:100px;
    height:100px;
}
.fade-enter-active, .fade-leave-active{
    transition: 1s all ease;
}

关于动画的四种状态，最重要的是 enter + enter-active + leave-active，它们已经可以决定好动画的开始和结束

enter：决定动画开始那一瞬间的状态

enter-active：决定动画过渡的效果，以及过渡到什么程度，过渡最后程度最好是和预设的程度一致，不然就会出现很怪异的效果，就比如 fade-enter-active 和 p 的长度宽度一致，因为在动画过渡完了之后就显示 p 真正的样式

leave-active：决定动画消失的效果

配合 animate.css 使用

1
2
3
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
	<p v-show="show"></p>
</transition>

多个元素运动

1
2
3
4
<transition-group enter-active-class="" leave-active-class="">
    <p :key="1"></p>
    <p :key="2"></p>
</transition-group>

在 :key 中加唯一标识即可