移入
移出
-
最基本動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用animate.css</title>
<script src="./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="root">
<transition name="fade">
<div v-show="show">Say Hello</div>
</transition>
<button @click="handleClick">切換</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
-
使用 keyframs實現動畫
css:
<style>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1)
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
這個時候就會產生一個問題這個css的樣式名稱必須按照格式嚴格命名嗎?當然不。如果需要自己命名,可以在html進行想應的修改如下:
active可對應上面的fade-enter-active,leave可對應上面的fade-leave-active
<div id="root">
<transition
name="fade"
enter-active-class="active"
leave-active-class="leave">
<div v-show="show">Say Hello</div>
</transition>
<button @click="handleClick">切換</button>
</div>
-
在自定義樣式名稱的基礎上使用animate
引入animate.css
<div id="root">
<transition
name="fade"
enter-active-class="animated shake"
leave-active-class="animated swing">
<div v-show="show">Say Hello</div>
</transition>
<button @click="handleClick">切換</button>
</div>
-
同時使用過渡效果和動畫
結合上面兩種在enter-active-class、leave-active-class中添加過度效果樣式
-
js動畫與velocity.js結合
js:
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-show="show">Say Hello</div>
</transition>
<button @click="handleClick">切換</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show
},
handleBeforeEnter(el) {
// el 表示動畫包裹的表情
// 動畫前的樣式
el.style.color = 'red'
},
handleEnter(el, done) {
// done 是一個回調函數
// 真正展示的動畫效果
setTimeout(() => {
el.style.color = 'green'
done() // 告訴vue動畫處理完了 這個時候回繼續調用after-enter時間
}, 2000)
},
handleAfterEnter() {
el.style.color = '#000'
}
}
})
</script>
</body>
除了上述的入場動畫還有出場動畫事件:before-leave、leave、after-leave用法與enter相同
引用velocity.js
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show
},
handleBeforeEnter(el) {
el.style.opacity = 0
},
handleEnter(el, done) {
// duration 表示時間ms
Velocity(el, {opacity: 1}, {duration: 1000})
},
handleAfterEnter() {
console.log('動畫結束')
}
}
})
</script>