过度和动画及animate.css动画库
过度和动画
这篇文章介绍Vue的过渡与动画,主要是用到组件transition。
我们在CSS 中也学习了过渡,Vue中的过渡和CSS中的过渡效果一样。Vue中在插入、更新或移除 DOM 的过程中就可以使用过渡。过渡分为单元过渡和多元素过渡。
单元素过渡
在过渡的实现过程中,从开始过渡到结束过渡,总共实现会有 6 个 class 切换:
- v-enter:定义上半场过渡的初始状态;在过渡开始前被添加,在过渡开始时会被移除
- v-enter-to:定义上半场过渡的结束状态;在过渡开始时被添加,在过渡完成时会被移除
- v-enter-active:这里包含了上面的v-enter、v-enter-to两个时间段,在这里可以对上半场过渡定 义过渡时间、曲线等
- v-leave:定义下半场过渡的初始状态;在过渡开始前被添加,在过渡开始时会被移除
- v-leave-to:定义下半场过渡的结束状态;在过渡开始时被添加,在过渡完成时会被移除
- v-leave-active:这里包含了上面的v-leave、v-leave-to两个时间段,在这里可以对下半场过渡定义过渡时间、曲线等
这六个 class 都是作用在 transition组件上的,如果transition组件没有定义name属性,则v-这个就是前缀,如果定义了name属性,则v-被替换。
通过CSS 动画完成过渡
<style>
.v-enter-active {
transition: all .3s ease;
}
.v-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.v-enter,
.v-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
<div id="app">
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition>
<p v-if="show">hello</p>
</transition>
</div>
</div>
<script>
let vm = new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
在上述代码中,六个class只使用了四个,因为v-enter-to、v-leave这两个类作用不大,第一个类是因为会被移除,第二个类是未起作用。所以可以不写这两个类的样式
通过CSS 过渡完成过渡
CSS 动画用法同 CSS 过渡,区别是在动画中v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。
将上面的CSS 切换成下列代码:
.v-enter-active {
animation: bounce-in .5s;
}
.v-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
自定义过渡的类名
在上面的描述中,我们知道了与过渡有关的六个class,我们也可以自定义这六个class 的名称,enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class和leave-to-class 这六个属性可以用于自定义六个类名,主要作用于transition组件,具体使用方式如下所示:
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
显性的过渡持续时间
过渡肯定有过渡时间,我们之前在CSS 动画和CSS 过渡中可以设置时间,而也可以通过 组件上的 duration属性设置一个显性的过渡持续时间 (以毫秒计):
<transition :duration="1000"></transition>
也可以分开设置进入和移出的持续时间:
<transition :duration="{ enter: 500, leave: 800 }"></transition>
animate.css动画库
vue项目使用animate.css动画库
1、下载:npm install animate.css --save
也可以在页面添加文件引用
页面添加animate.css文件:https://daneden.github.io/animate.css/
<link rel="stylesheet" href="./animate.css">
2、引用,在全局min.js中引用
import animated from 'animate.css'
3、就可以正常在页面使用了
举例:
<h1 class="animate__animated animate__bounce">An animated element</h1>
进入animate.css官网点击右侧可以挑选需要的动画,鼠标滑上会显示如下图中圈出来的图案,可以直接点击复制类名,在需要使用动画的元素添加两个类名一个是animate__animated必须有,在加上在官网复制的这个类名即可