Vue 中同时使用过渡和动画
在上篇博客 《Vue 中使用 animate.css 库》基础上开始这篇博客
在上篇博客中，完成了 引入 animate.css 库 且实现动画的效果，但发现，在刚开始时元素并没有动画效果
若想让元素刚开始时也具备动画效果，则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 中同时使用过渡和动画</title>
<script src='./vue.js'></script>
<link rel="stylesheet" href="../css/animate.css" />
</head>
<body>
<div id ="root">
<transition name="fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing">
<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>
</body>
</html>在刚开始时就会有动画效果
输出：上下抖动---正常--- 左右抖动---消失---上下抖动---正常
引入 animate.css 库 实质还是 @keyframe（CSS3） 的形式，如果想将其和 过渡效果 同时展现出来，则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 中同时使用过渡和动画</title>
<script src='./vue.js'></script>
<link rel="stylesheet" href="../css/animate.css" />
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id ="root">
<transition name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing">
<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>
</body>
</html>输出：上下抖动---正常--- 左右抖动---（逐渐）消失---上下抖动---（逐渐）正常
但有个问题，设置 transition: opacity 3s; 是3秒；但知 swing 和 shake 都是 1秒；会导致冲突，则添加 type="transition"，以较长的时间的时长为准
<div id ="root">
<transition
type="transition"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing">
<div v-if="show">hello world</div>
</transition>
还可以自定义播放时长： :duration="5000" 5秒
<div id ="root">
<transition
:duration="5000"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing">
<div v-if="show">hello world</div>
</transition>复杂一些：：duration="{enter:5000,leave:10000}" 入场5秒 ，离厂10秒
