vue動畫 過渡效果以及 animate.css、velocity.js的基本使用
阿新 • • 發佈：2018-12-21
移入
移出
-
最基本動畫
<!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相同