#####1. CSS动画原理
CSS:
<style type="text/css">
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 1s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 1s;
}
</style>
HTML：
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
或：
<transition-group>
<div v-for="(item,index) in list" :key="item.id">{{item.title}}</div>
</transition-group>
css 中的每个开头都以 fade 开头，原因是因为给 transition 的 name 属性为 fade。 如果不写默认开头为 v（例如：.v-enter）最终效果如下：
CSS:
<style type="text/css">
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
</style>
HTML:
<body>
<div id="root">
<transition>
<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>
#####2. CSS动画使用
CSS:
<style type="text/css">
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.active{
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
HTML：
<body>
<div id="root">
<transition
name="fade"
enter-active-class="active"
leave-active-class="leave" >
<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>
#####3. Animate动画的使用
Animate.css官网
Animate 所提供的动画其实是 @keyframes 动画，是属于CSS3的。
<link rel="stylesheet" type="text/css" href="../animate.css">
导入 animate.css ，使用时注意，必须实现 enter-active-class 与 leave-active-class 且包含 animated 字段， animated 字段后面才是动画效果，动画效果可在官网中选取（例如：enter-active-class="animated 动画效果"）固定写法。
<body>
<div id="root">
<transition
name="fade" enter-active-class="animated swing"
leave-active-class="animated shake" >
<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>
上面这个动画呢有个缺点就是在首次显示（也就是页面刚出现的时候）的时候没有动画效果，如果想要一开始就带有动画效果则需要下面的 appear 书写方式：
<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>
#####3. Animate(@keyframes)动画 与 过渡动画(transition)效果结合
两者动画结合只需要在 enter-active-class 与 leave-active-class 后面加上过渡动画类型即可，但是两者动画时间可能会不一致，那么：
-
可以通过 type="transition" 来约束动画以当前的过渡动画时间为准。
-
:duration="5000" 自定义动画时间5秒
-
:duration="{enter: 5000, leave: 10000}" 自定义出场动画5秒，离场动画10秒
CSS：
<style type="text/css">
.fade-enter, .fade-leave-to{
opacity: 0;
}
.fade-enter-active, .fade-leave-active{
transition: opacity 3s;
}
</style>
HTML：
<body>
<div id="root">
<transition
name="fade"
:duration="{enter: 5000, leave: 10000}"
//:duration="5000"
//type="transition"
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>
#####4. 动画过程回调函数监听
@before-leave: 将要执行离场动画 @leave: 正在执行离场动画 @after-leave: 离场动画执行完成 @before-enter: 将要执行入场动画 @enter: 正在执行入场动画 @after-enter: 入场动画执行完成
<body>
<div id="root">
<transition
name="fade"
@before-leave="handleBeforeLeave"
@leave="handleLeave"
@after-leave="handleAfterLeave"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<child v-show="show"></child>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child', {
template: '<div>hello world</div>'
})
var vm = new Vue({
el: "#root",
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 = '#000'
}
}
})
</script>
</body>
#####5. velocity 动画
<script src="../velocity.min.js"></script>
导入完成之后开始使用
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<child v-show="show"></child>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child', {
template: '<div>hello world</div>'
})
var vm = new Vue({
el: "#root",
data:{
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
},
handleBeforeEnter: function(el) {
el.style.opacity = 0;
},
handleEnter: function(el, done) {
Velocity(el, {opacity: 1}, {duration: 1000, complete: done})
},
handleAfterEnter: function(el) {
alert('动画结束')
}
}
})
</script>
</body>
