Vue中的动画特效
1.CSS动画原理
动画进⼊：动画如果不给名字，默认：v-enter
原理：在某⼀时刻给 div 添加或删除⼀些样式
<style>
.fade-enter{
opacity:0;
}
.fade-enter-active{
transition: opacity 1s; //对opacity有⼀个监控，如果有变化则让opacity在3s中从0变到⼀个opacity的值。
}
}
</style>
<div id='root'>
<transition name='fade'><!--如果不给name，动画默认名字v-enter -->
<div v-show='show'>hello world</div>
</transition>
</div>
<!--
动画原理说明：当动画开没执⾏的⼀瞬间，vue会帮我们在div标签上加fade-enter 和 fade-enter-active 样式，
fade-enter-active的执⾏周期：动画还没开始，准备开始执⾏第⼀帧时就存在了，到动画结束时才被移除
当执⾏到第⼆帧的时候，fade-enter 被删除，同时 fade-enter-active 中的opacity 检测到变化，就在1s 中变化opacity的值
-->
View Code
动画离开：
<style>
.fade-leave-to{
opacity:0;
}
.fade-leave-active{
transition: opacity 3s;
}
}
</style>
<div id='root'>
<transition name='fade'>
<div v-show='show'>hello world</div>
</transition>
</div>
<!--
动画原理说明：动画开始和结束的瞬间，页⾯上都有⼀个fade-leave-active，在动画的运⾏过程中，要求时刻监听着 div 的opacity这个属性，⼀旦发⽣变化，就让他三秒钟进⾏慢慢的过渡。第⼀帧的时候，动画把持原有的状态，当进⼊第⼆帧时，div 多了⼀个 fade-leave-to 的属性，fade-leave-active
检测到 opacity 有变化，则在3秒钟对opacity 进⾏过渡
-->
View Code
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.
v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: all 2s;
}
</style>
</head>
<body>
<div class="app">
<transition>
<div v-if='show'>⼀个有CSS特效的内容</div>
</transition>
<button @click='btnClick'>切换</button>
</div>
<script>
new Vue({
el: '.app',
data: {
show: true
},
methods: {
btnClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
View Code
2.vue中使⽤animate.css库
第⼀步：先在页⾯中引⼊animate.css库
第⼆步：必须⾃定义动画样式名字（animated）
<!--<transition enter-active-class='animated 动画名称'>-->
<transition enter-active-class='animated swing'  leave-active-class='animated shake'>
3.使⽤ appear 让元素第⼀次显⽰的时候也有动画（初次动画）
<transition
appear  <!--声明-->
enter-active-class='animated swing'
leave-active-class='animated shake'
appear-active-class='animated swing'  <!--设置第⼀次显⽰的时候的动画-->
>
<div v-show='show'>带有动画效果的⽂字</div>
</transition>
4.同时使⽤过渡和动画
<transition
<!-- type:'transition' --><!--定义以⾃⼰写的动画时长为准-->
:duration:"{enter:5000,leave:10000}"<!--分别定义动画开始时间⽤5s，离开时间⽤10s-->
appear  <!--声明-->
enter-active-class='animated swing  v-enter-active' <!--同时使⽤过渡和动画-->
leave-active-class='animated shake  v-leave-active'<!--同时使⽤过渡和动画-->
appear-active-class='animated swing'  <!--设置第⼀次显⽰的时候的动画-->
>
<!--如果过渡和⾃⼰定义的动画时长不⼀致，特意定义使⽤谁的时长为准（type：'transition'）--> 5.vue中的 JS 动画与 velocity.js
1）vue中也有很多JS动画钩⼦
<transition
name='fade'
@before-enter='beforeEnter'  <!--元素即将显⽰时，事件被触发时-->
@enter='enterClick'  <!--执⾏动画时，事件被触发-->
@after-enter='afterEnter' <!--动画完成时，事件被触发-->
>
<div v-show='show'>⽂字内容</div>
</transition>
methods:{
beforeEnter:function(el){ // before-enter 有⼀个参数 el 是div元素
lor='red';
}，
enterClick:function(el,done){  //enter 有两个参数，done是回调函数
setTimeout(function(){
lor='green'
setTimeout(function(){
done();  //调⽤回调函数，才会执⾏ after 钩⼦
},4000);
}，
afterEnter:function(el){    //after⾥⾯有⼀个参数
lor="#000";
}
}
2）velocity.js
通过 velocity.js 的简单语法可以实现酷炫的动画效果methods:{
beforeEnter:function(el){ // 设置opacity=0
el.style.opacity=0;
}，
enterClick:function(el,done){
Velocity(el,{ //元素名
opacity:1  //设置效果
},{
duration:1000,  //设置过渡时间
complete:done  // 回调函数，执⾏after
});
}，
afterEnter:function(el){    //
console.log('动画结束');
}
}
6.多个元素或组件过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script src="./js/vue.js"></script>
<style>
.v-enter {
opacity: 0;
}
.v-enter-active {
transition: all 1s;
}
</style>
</head>
<body>
<div class="root">
<!-- mode过渡⽅式 out-in：先隐藏再显⽰ in-out：先显⽰再隐藏 -->
<transition mode='out-in'>
<!--
<child v-if='show'>child</child>
<child-one v-else>child-one</child-one>
-
->
<!-- 动态组件过渡 -->
<component :is='type'></component>
</transition>
<button @click='btnClick'>切换</button>
</div>
<script>
Vueponent('child', {
template: "<div>child-组件</div>"
});
Vueponent('child-one', {
template: '<div>child-one-组件</div>'
});
var vm = new Vue({
el: '.root',
data: {
// show: 'true'
type: 'child'
},
methods: {
btnClick: function() {
// this.show = !this.show;
}
}
});
</script>
</body>
</html>
7.Vue中的列表过渡（transition-group）
⽤法和 transition ⼀致
<div v-for='item of list' :key='item.id'>{{item.title}}</div>
</transition-group>
<!--等同于多组加了动画的div-->
<transition>
<div>Hello World</div>
</transition>
<transition>
<div>Hello World</div>
</transition>
...
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script src="./js/vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.
v-leave-active {
transition: all 1s;
}
</style>transition用法搭配
</head>
<body>
<div class="app">
<button @click='btnAdd'>Add</button>
<!--动画组-->
<transition-group>
<!--for循环中这⾥的key值不建议使⽤index，会影响性能-->
<div v-for='item of list' :key='item.id'>{{item.title}}</div>
</transition-group>
</div>
<script>
var count = 0;
var vm = new Vue({
el: '.app',
data: {
list: []
},
methods: {
btnAdd: function() {
this.list.push({
id: count++,
title: 'Hello World' + count
});
}
}
});
</script>
</body>
</html>
View Code