1，基本文法格式
<style>
/* 注意：這個6個過渡類，都是vue内置的，是以，需要使用vue提供的這個類名才行 */
.v-leave {
/* 定義 出場動畫的 起始狀态 */
/* 隻停留一幀 */
transform: translateY(100px);
}
.v-leave-active {
/* 定義 出場動畫 過程 */
transition: all 1s ease;
}
.v-leave-to {
/* 定義 出場動畫 結束狀态（即：該動畫要達到的目标狀态） */
transform: translateY(300px);
opacity: 0;
}
/* 定義 入場動畫 */
.v-enter {
/* 定義 入場動畫 的起始狀态 */
transform: translateY(300px);
opacity: 0;
}
.v-enter-active {
/* 定義 入場動畫 過程 */
transition: all 2s ease;
}
.v-enter-to {
/* 定義 入場動畫 過程 */
/* 隻停留一幀 */
transform: translateY(0px);
}
</style> <transition>
<p v-show = "show" v-bind:style = "styleobj">動畫執行個體</p>
</transition> 過渡其實就是一個淡入淡出的效果。Vue在元素顯示與隐藏的過渡中，提供了 6 個 class 來切換：
-
v-enter
-
v-enter-active
-
v-enter-to
v-enter
-
v-leave
-
v-leave-active
-
v-leave-to
v-leave
2，css過渡動畫案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以設定不同的進入和離開動畫 */
/* 設定持續時間和動畫函數 */
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">戳我！！</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">動畫</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html> 3，animate.css插件
Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的動畫效果的CSS集合。
它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。換句話說：Animate.css就是一大堆的很酷，很有趣，而且很炫又能跨浏覽器的動畫效果樣式集錦，可以直接使用到項目中。
位址：https://github.com/daneden/animate.css
實際應用
在一般的使用中，直接在元素上添加animated和對應的類名即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html> animat加過渡的一些問題
type="transition" //用于選擇動畫的持續時間是過渡的時間
:duration="10000" //自定義動畫時長
:duration="{enter:5000,leave:10000}" //動畫進入時長和離開時長
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)