1.Vue中的动画实现原理
Vue实际上是通过动态地给<transition>标签包裹的内容添加class,然后结合css对不同的class实现不同样式,最终实现动画效果.
<!--淡入/淡出-->
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition:opacity 2s;
}
</style>
<div id="app">
<transition>
<div v-show="show">hello world!</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show = !this.show
}
}
})
</script>
2.使用animate css库实现各种复杂酷炫的动画效果.
官网:https://daneden.github.io/animate.css/
可以在BOOTCDN找到生产环境需要的animate.css
使用非常简单,引入animate.css后,将需要用动画效果的模块用<transition>标签包裹,然后在其中添加enter-avtive-class="animated xx动画" 和 leave-active-class="animated xx动画",即可为被包裹的组件添加入场和出场动画效果,具体的动画效果长啥样由xx动画名指定,可以在官网上选好后写在animated后面.
<head>
<meta charset="UTF-8">
<title>使用animate css</title>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<transition enter-active-class="animated bounce" leave-active-class="animated shake" appear appear-active-class="animated bounce">
<div v-show="show">hello world!</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show = !this.show
}
}
})
</script>
</body>
3.Vue中同时使用过渡和动画
需要强制为transition定义一个名字,比如fade,然后在css中要以该名字打头分别设置xx-enter,xx-leave-to,xx-fade-enter-active,xx-leave-active.
值得注意的是,我们指定了过渡的时间是3秒,然后动画的效果却只有2秒,这时候Vue也不知道要以谁的时长为准了,于是我们需要手动指定type="transition",这时候即以过渡的时间为准.当然你还可以自定义时间,在<transition :duration="xxx毫秒">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用animate css</title>
<link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition:opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition type="transition" name="fade" enter-active-class="animated bounce fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated bounce">
<div v-show="show">hello world!</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
4.使用js实现动画效果/velocity.js库实现动画效果
可以通过在<transition>标签内添加 @before-enter @enter @after-enter @before-leave @leave @after-enter 钩子来触发事件,通过el绑定要改变的样式,从而实现动画效果.
<div id="app">
<transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<div v-show="show">hello world!</div>
</transition>
<button @click="handleClick">按钮</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show = ! this.show
},
handleBeforeEnter:function (el) {
el.style.color = 'red'
},
handleEnter:function (el,done) {
setTimeout(()=>{
el.style.color ='green'
},2000);
setTimeout(()=>{
done();
},4000)
},
handleAfterEnter:function (el) {
el.style.color='blue'
}
}
})
</script>
使用velocity实现动画效果:
先在官网下载velocity.js或者使用bootcdn上的velocity.js
然后在根据官网的语法创造各种酷炫的动画效果.
官网:http://velocityjs.org/#reverse
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
</head>
<body>
<div id="app">
<transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<div v-show="show">hello world!</div>
</transition>
<button @click="handleClick">按钮</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show = ! this.show
},
handleBeforeEnter:function (el) {
el.style.color = 'red'
},
handleEnter:function (el,done) {
Velocity(el, { opacity: 0 }, { duration: 500},done());
},
handleAfterEnter:function (el) {
el.style.color='blue'
console.log("动画结束")
}
}
})
</script>
</body>
5.Vue中多个元素/组件动画效果实现
可以通过给每个元素添加一个key,防止vue复用元素导致动画失效. 还可以设置<transition>的mode为in-out或者out-in来控制动画进入和淡出的先后顺序.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="out-in">
<div v-if="show" key="a">hello world</div>
<div v-else key="b">bye world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
组件实现,其他没啥差别,将<component>放在<transition>标签内即可.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="out-in">
<component :is="type"></component>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('my-one',{
template:'<div>hello world</div>'
});
Vue.component('my-two',{
template:'<div>bye world</div>'
});
let vm = new Vue({
el:'#app',
data:{
type:'my-one'
},
methods:{
handleClick:function () {
this.type = this.type === 'my-one' ? 'my-two' : 'my-one'
}
}
})
</script>
</body>
</html>
6.Vue中的列表过渡效果
借助<transition-group>实现.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: opacity 2s;
}
</style>
</head>
<body>
<div id="app">
<transition-group>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="add">添加</button>
</div>
<script>
var count = 0;
let vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
add: function () {
this.list.push({
id: count++,
title: 'this is a title'
})
}
}
})
</script>
</body>
</html>
7.Vue中的动画封装
在实际开发中,一个动画效果可能被用在多处,我们可以借助Vue的插槽功能将同类型的动画进行封装,这样就可以省去很多重复代码,实现动画组件复用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-fade :show="show">
<h1>{{msg}}</h1>
</my-fade>
<my-fade :show="show">
<h5>{{msg}}</h5>
</my-fade>
<button @click="handleChange">切换</button>
</div>
<script>
Vue.component('my-fade', {
template: '<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>',
props: ['show'],
methods: {
handleBeforeEnter: function (el) {
el.style.color = 'red'
},
handleEnter: function (el, done) {
setTimeout(() => {
el.style.color = 'blue';
done();
}, 400)
}
}
});
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world!',
show: true
},
methods: {
handleChange: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>