<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="../lib/js/vue.js"></script>
</head>
<style>
/**
.v-enter 【这是一个时间点】进入之前，元素的起始状态，此时还没有开始进入
.v-leave-to 【这是一个时间点】动画离开之后，离开的终止状态，此时动画已经结束
*/
.v-enter,
.v-leave-to{
opacity: 0;
transform: translate(150px);
}
/**
.v-enter-active 【入场动画的时间段】
.v-leave-active 【离场动画的时间段】
*/
.v-enter-active,
.v-leave-active{
transition: all 0.6s linear;
}
</style>
<body>
<div id="app">
<h1>使用过渡类名实现动画</h1>
<input type="button" value="button" @click="change2">
<!-- 使用transition标签把动画的内容包裹起来 -->
<transition>
<h3 v-if="flag2">这是一只猫</h3>
</transition>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
flag2:'true'
},
methods:{
change2(){
this.flag2 = !this.flag2
}
}
})
</script>
</body>
</html>