vue 过渡动画类名：
v-enter：定义过渡的开始状态
v-enter-active：定义过渡的状态
v-enter-to：定义进入过渡的结果状态
v-leave：定义离开过渡的开始状态
v-leave-active：定义过渡状态
v-leave-to：定义开始过渡的结束状态
例子：
<html>
<head>
<title>css过渡</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.fade-enter-active{
transition:all 0.3s ease;
}
.fade-leave-active{
transition:all 0.3s linear;
}
.fade-enter,.fade-leave-to{
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">toggle</button>
<transition name="fade"><!-- 上面“v-”中的v为name的属性值 -->
<p v-if="show">shira</p>
</transition>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return{
show:true
}
}
})
</script>
</html>