The principle of 1.Vue animation
Vue actually to <transition> tag contents of the package by dynamically add class, and then combined to implement different styles css different class, and ultimately animation.
<!--淡入/淡出-->
<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. Use animate css library implements a variety of complex cool animation effects.
Official website: https://daneden.github.io/animate.css/
Animate.css can be found in a production environment requires BOOTCDN
Very easy to use, after the introduction animate.css, will need to use the animation module <transition> tag wrapped, then added enter-avtive-class = "animated xx movies" and leave-active-class = "animated xx Animation "to add a component to be wrapped entry and exit animation effects, animation specific long-sawed designated by the name xx animation can be written on the back animated after the official website selected.
<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 use both transitions and animations
Transition needs to be forced to define a name, such as Fade, to then be provided the name beginning xx-enter, xx-leave-to, xx-fade-enter-active, xx-leave-active in css respectively.
It is noteworthy that, we specify the transition time is 3 seconds, and then the animation effect is only 2 seconds, this time Vue do not know who prevail in a long time, so we need to manually specify type = "transition", at this time that is subject to the transition time of course you can also customize the time in. <transition: duration = "xxx ms">
<!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. Use js library to achieve animation effects animation effects /velocity.js
By adding in the <transition> tag @ before-enter @enter @ after-enter @ before-leave @leave @ after-enter hook to trigger events by el binding to change the style, in order to achieve animation effects.
<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>
Use velocity to achieve animation effects:
In the first official website to download velocity.js on velocity.js or use bootcdn
Then create a variety of cool animation effects according to the official website of grammar.
Official website: 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 several elements / components to achieve animation
Be a key by adding to each element, the elements to prevent reuse vue cause failure of animation may also be disposed <transition> is the in-out mode or the out-in and fade-out animation to be controlled to enter the order.
<!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 implementation, nothing other differences, the <component> placed in <transition> tab.
<!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>List of transition effects 6.Vue
By <transition-group> achieved.
<!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 animation package
In the actual development, an animation effect may be used in many places, we can use the function Vue slots encapsulating the same type of animation, so that save a lot of repeated code reuse components to achieve animation.
<!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>
