Vuejs第七篇之Vuejs过渡动画案例全面解析

<div class="box" v-if="box_1" transition="mytran">1</div>

<div v-for="i in items" class="box" transition="mytran">{{i}}</div>

<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 

/*这个定义动画情况，以及存在时的样式，这个样式会覆盖class里的样式*/ 
.mytran-transition { 
transition: all 0.3s ease; 
background-color: greenyellow; 
} 

/* .mytran-enter 定义进入的开始状态 */ 
/* .mytran-leave 定义离开的结束状态 */ 
.mytran-enter, .mytran-leave { 
height: 0; 
width: 0; 
} 
</style> 
<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box" v-if="box_1" transition="mytran">1</div> 
<div class="box" v-if="box_2" transition="mytran">2</div> 
<div class="box" v-if="box_3" transition="mytran">3</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box_1: true, 
box_2: true, 
box_3: true 
}, 
methods: { 
change: function () { 
for (var i = 1; i < 4; i++) { 
this['box_' + i] = Math.random() > 0.5 "background-color: #ffff00">④JavaScript钩子：

【1】简单来说，这个不影响CSS动画（依然是那三个类的变化）；
【2】这个主要用于抓取进入和离开各四个时刻，用于做某些事情；
【3】这八个时刻分别为：
进入：beforeEnter（进入之前），enter（进入动画刚开始），afterEnter（进入动画结束），enterCancelled（进入被中断）；
退出：beforeLeave（退出之前），leave（退出动画刚开始），afterLeave（退出动画结束），leaveCancelled（退出被中断）；
【4】对DOM的修改，部分情况下会恢复，例如在leave这一步修改dom的textContent属性，将在dom重新进入时恢复原状；但若在enter这一步修改，则不会恢复。


如代码：


Vue.transition('mytran', { 
beforeEnter: function (el) { //进入之前 
console.log("进入动画开始时间:" + new Date().getTime()); 
}, 
enter: function (el) { 
el.textContent = new Date(); 
}, 
afterEnter: function (el) { 
console.log("进入结束时间:" + new Date().getTime()); 
}, 
beforeLeave: function (el) { 
console.log("离开动画开始时间:" + new Date().getTime()); 
}, 
leave: function (el) { 
$(el).text("离开中..." + new Date()); 
}, 
afterLeave: function (el) { 
console.log("离开结束时间:" + new Date().getTime()); 
} 
})


⑤自定义过渡类名：
之所以要自定义过渡类名，是因为我们不可能要求每个css动画的样式，都是按照Vuejs标准的写法来写的（比如我们下载别人写的代码）；


注：需要在声明相关的Vue实例之前进行定义。


首先，推荐一个Vuejs官方教程推荐的动画集合：（这个不是下载链接，需要打开它去找到下载链接才能下载）
https://daneden.github.io/animate.css/


下载后，导入这个css文件，然后开始自定义动画；


<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box animated" v-if="box" transition="bounce">1</div> 
</div> 
<script> 
Vue.transition("bounce", { 
enterClass: 'bounceInLeft', 
leaveClass: 'bounceOutRight' 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>


解释：
【1】进行动画的标签，需要有animated这个class；
【2】enterClass和leaveClass相当于之前的xxx-enter和xxx-leave；
【3】效果是从左边闪进来，从右边闪出去。
【4】需要在声明Vue实例前设置动画，否则会无效；


⑥使用animation动画
在Vuejs中，animation动画和transition动画是不同的。


简单来说，transition动画分为三步：常驻类，进入时触发的类，退出时触发的类；只有常驻类有transition动画属性，其他两步只有css状态；


而animation动画分为两步：进入时触发的类，退出时触发的类。当然，还有xxx-transition这个类存在于dom之中（这个类可以用于设置动画原点，或者干脆不设置这个类）；


在animation动画中，进入和退出时的class类，都应该有动画效果，例如：


@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
}


进入和退出时，执行的类名和transition一样，都是xxx-leave和xxx-enter这样格式的；


当然，也可以自定义类名。


示例代码：


<style> 
.box { 
width: 100px; 
height: 100px; 
border: 1px solid red; 
display: inline-block; 
} 
@keyframes fat { 
0% { 
width: 100px 
} 
50% { 
width: 200px 
} 
100% { 
width: 100px 
} 
} 
.fat-leave, .fat-enter { 
animation: fat 1s both; 
} 
</style> 
<div id="app"> 
<button @click="change">点击随机隐藏和显示</button> 
<br/> 
<div class="box animated" v-if="box" transition="fat">1</div> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
box: true 
}, 
methods: { 
change: function () { 
this.box = !this.box; 
} 
} 
}); 
</script>


效果：
消失：先变宽，再恢复，然后消失；
进入：出现，变宽，再恢复，停留；
这里偷懒共用了同一个动画效果。


⑦除此之外，还有
【1】显式声明动画类型（假如动画同时存在transition和animation，且分情况执行其中一种）；


【2】过渡流程详解（触发动画时，js钩子执行与css执行的顺序）；


【3】CSS动画（就是animation，像上面那样已经写过了，具体略）；


【4】JavaScript过渡（不是js钩子，钩子是指在某个阶段会调用某个函数，但这个钩子跟动画无关），用JavaScript来控制动画，比如jquery的animate方法；


【5】v-for使用的渐进过渡；


由于暂时用不上，所以略掉，需要查看的请打开连接：


http://cn.vuejs.org/guide/transitions.html
以上所述是小编给大家介绍的Vuejs第七篇之Vuejs过渡动画案例全面解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！