Vue中的動畫特效
阿新 • • 發佈：2018-12-10
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。 包括以下工具：
- 在 CSS 過渡和動畫中自動應用 class
- 可以配合使用第三方 CSS 動畫庫，如 Animate.css
- 在過渡鉤子函式中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
Vue 提供了 transition 的封裝元件，在下列情形中，可以給任何元素和元件新增進入/離開過渡
- 條件渲染 (使用
v-if) - 條件展示 (使用
v-show) - 動態元件
- 元件根節點
過渡的類名
在進入/離開的過渡中，會有 6 個 class 切換。
-
v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。 -
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。 -
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時v-enter被移除)，在過渡/動畫完成之後移除。 -
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。 -
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。 -
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時v-leave被刪除)，在過渡/動畫完成之後移除。
我們可以通過以下特性來自定義過渡類名：
enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue 動畫</title>
<script src="./vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<transition :duration="{enter: 5000,leave:10000}" name="fade" appear enter-active-class="animated fadeIn fade-enter-active" leave-active-class="animated fadeOut fade-leave-active" appear-active-class="animated fadeIn ">
<div v-show="show">Hello World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var app = new Vue({
el: " #root ",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>1.appear :解決首次進入沒有動畫的效果
2.duration="{enter: 5000,leave:10000}" 解決兩種動畫效果的不確定時間。