自定义过渡的类名
我们可以通过以下 attribute 来自定义过渡类名：
enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
示例：
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义过渡的类名</title>
<script src="./vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id="hzh">
<button @click="hzhShow = !hzhShow">
切换渲染
</button>
<transition
name="hzh-custom-classes-transition"
enter-active-class="hzhAnimated hzhTada"
leave-active-class="hzhAnimated hzhBounceOutRight"
>
<p v-if="hzhShow">
黄子涵
</p>
</transition>
</div>
<script>
new Vue({
el: '#hzh',
data: {
hzhShow: true
}
})
</script>
</body>
