一、过渡动画
(1)无论是组件之间的切换,或者用v-if,v-show指令控制dom的显示,只要是你想实现动画效果,必须在外面包裹,且必定给一个name属性,用于指定使用定义好的动画
<div id="root">
<transition name="fade">
<component :is="type"></component>
</transition>
<button @click="change">change</button>
</div>
(2)开始进行定义动画,因为前面的name是fade,所以后面的动画定义的类名,必须按照fade开头。
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
(3)实现效果
二、keyframe动画
(1)还是使用transiton包裹,也给一个name,但是在css定义动画有所不同。
keyframe动画与过渡动画不同点在于,keyframe是一种插帧动画,我们可以定义在不同帧时候的动画,这里我们只在0%,50%,100%处定义,大家可以在中间多定义一些
(2)定义动画
<style>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.fade-enter-active,
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 3s;
}
</style>
(3)实现效果
三、使用animate.css库
(1)之前都是使用name=“fade”,定义动画时候写一大堆,我们当然可以反过来,在name里面写一大堆,在定义时候写少一点。并且使用animate.css必须这样写。
①transition标签里面这样写
<div id="root">
<transition enter-active-class="enter" leave-active-class="leave">
<component :is="type"></component>
</transition>
<button @click="change">change</button>
</div>
②定义动画这样写
<style>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.enter,
.leave {
transform-origin: left center;
animation: bounce-in 3s;
}
</style>
效果和之前一模一样
(2)学会怎么改写name之后,我们可以使用animate.css库,这里说明以下,animate.css是属于用@keyframe动画一种,不是使用的过渡动画。
①引入库,我是采用CDN方式
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
②在transition标签中使用
<div id="root">
<transition enter-active-class="animated bounce" leave-active-class="animated shake">
<component :is="type"></component>
</transition>
<button @click="change">change</button>
</div>
animated必写,后面是动画的类型
四、列表过渡
使用trasition-group就好啦
<div id="root">
<transition-group enter-active-class="enter" leave-active-class="leave">
<div v-for="item of list" :key="item.index">{{item.index}}---{{item.content}}</div>
</transition-group>
<button @click="change">change</button>
</div>
结果