一.vue.transition
過渡過程
vue-transition在過渡動畫的不同時期通過切換不同class，給綁定元素添加移除樣式梁钾，達到過渡效果啥酱。以顯示隱藏為例：
它有六個階段仔拟，每個階段給元素添加不同樣式
v-enter：進入過渡前的樣式
v-enter-active:進入過渡時的樣式
v-enter-to:進入過渡結(jié)束時的樣式
v-leave：離開過渡前的樣式
v-leave-active:離開過渡時的樣式
v-leave-to:離開過渡后的樣式
<!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>Document</title>
<link rel="stylesheet" type="text/css">
<style>
.xxx-enter-active, .xxx-leave-active {
定義過渡樣式，默認(rèn)寫成v-enter形式了罪，給transition命名后锭环，用name替換v。
transition: opacity .5s;
}
.xxx-enter, .xxx-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用自定義的動畫 -->
<button @click='show1=!show1'>顯示/隱藏</button>
<transition name='xxx'>
//transition是vue封裝的插件泊藕，引用時將要引用過渡動畫的標(biāo)簽放入transition標(biāo)簽中即可辅辩，name屬性用來命名過渡插件
<div v-show='show1'>
//標(biāo)簽綁定v-show指令，show1是Boolean類型變量娃圆，在data中將其初始值設(shè)為true玫锋，點擊事件使show1值取反。v-show=“true”顯示
<h1>我是用來演示動畫的-1</h1>
</div>
</transition>
<hr>
二.animate.css
使用方法：
1.用link標(biāo)簽引入animate動畫庫
2.將需要使用過渡動畫的標(biāo)簽放入transition標(biāo)簽中踊餐，綁定過渡樣式
<!-- 使用animate.css動畫景醇，工作中常用 -->
<button @click='show2=!show2'>顯示/隱藏</button>
<transition
enter-active-class="animated tada"
//綁定進入時樣式，固定寫法,tada是引用的具體樣式
leave-active-class="animated bounceOutRight">
//綁定離開時樣式吝岭，固定寫法,bounceOutRight是引用的具體樣式
<div v-show='show2'>
<h1>我是用來演示動畫的-2</h1>
</div>
</transition>
<hr>
三.過渡模式
<!-- 學(xué)習(xí)使用mode屬性 -->
<!-- 注意要給元素指定key值 -->
<button @click='show3=!show3'>顯示/隱藏</button>
<transition name='fade' mode='out-in'>//mode指定動畫模式三痰，先進入動畫吧寺，后執(zhí)行隱藏動畫
<div v-if='show3' key='1'>
<h1>我是用來演示動畫的-3</h1>
</div>
<div v-else key='2'>
//key的作用是為了更高效的更新虛擬dom，vue在相同的標(biāo)簽名元素中做過渡切換時散劫，設(shè)置不同的key只可以使得vue將它們區(qū)分開,防止渲染錯誤
<h1>我是用來演示動畫的-4</h1>
</div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show1: true,
show2: true,
show3: true
}
})
</script>
</body>
</html>
