本节内容包括
- 常规的 transition 组件动画
- 使用 keyframes 动画
- 使用 Animate.css
- 让动画首次执行
- 过渡与动画同时存在
- 使用第三方 JavaScript 动画库 Velocity.js
更多内容见官网过度与动画部分教程
一.常规的 transition 组件动画
vue 提供了 transition 的封装组件，让我们实现动画效果。
这里，我们要实现的效果如下
我们先看下面这张图
这张图是进入过程中的类名切换。在动画开始前，添加了fade-enter和fade-enter-active类；在动画的下一帧，移除了fade-enter类，增加了fade-enter-to类；在动画结束时删除了fade-enter-active和fade-enter-to类。
离开时的类名操作图
从上面两图来看，一共有六个类。
然后，我们来写代码实现
<head>
<style>
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 1s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<!-- transition可以加name属性，对应的css类名将开头改为对应的name开头，默认为v开头 -->
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>这样，我们就实现了显示过程 opacity 从0到1的过程，隐藏过程从1到0。这里我们可以用v-if也可以用v-show。
二.使用 keyframes 动画
看代码
<head>
<style>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.enter{
transform-origin: left center;/*改变被转换元素的位置 此处解决缩放可能会出现的问题*/
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
/*reverse：反向执行*/
}
</style>
</head>
<body>
<div id="root">
<!-- 自定义类 -->
<transition
enter-active-class="enter"
leave-active-class="leave">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>这里用到了自定义类，分别是enter-active和leave-active，使用了我们自己写的keyframes动画。效果如下
其他的类也可以使用自定义类，详情查看vue官网教程
三.使用 Animate.css
animate.css 其实和上面差不多，它封装的就是keyframes动画。引入样式库后，我们只需将上面例子的html代码替换成下面这样
<div id="root">
<!-- 使用animate.css库 animated类必须要有 -->
<transition
enter-active-class="animated bounce"
leave-active-class="animated swing">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>效果如下
四.让动画首次执行
首次执行即刷新页面执行动画。我们只需加上appear和appear-active-class
<div id="root">
<!-- 使用animate.css库 animated类必须要有 -->
<transition
appear
appear-active-class="animated bounce"
enter-active-class="animated bounce"
leave-active-class="animated swing">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>五.过渡与动画同时存在
当transition过渡与keyframes动画同时存在时，我们要以谁的时长为动画时常呢？这需要我们去设置type。type为transition，这时动画时长为3s，type为animate这时动画时长为animate.css的时长为准。
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
<div id="root">
<transition
name="fade"
type="transition"
enter-active-class="animated bounce fade-enter-active"
leave-active-class="animated swing fade-leave-active">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>六.使用第三方 JavaScript 动画库 Velocity.js
<div id="root">
<!-- enter为进场动画，对应的leave为出场动画 -->
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show;
},
handleBeforeEnter: function (el) {
el.style.opacity = 0;
},
handleEnter: function (el, done) {
Velocity(el, {
opacity: 1
}, {
duration: 1000,
complete: done
})
},
handleAfterEnter: function (el) {
}
}
})
</script>上面transition标签绑定的事件为vue提供的js钩子，对应的还有leave相关的钩子。上面的动画只能执行一次，我们只需将v-show改为v-if即可。
动画这块还有很多的知识点，如：多个元素/组件的过渡，列表过渡等。