<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script src="../lib/js/vue.js"></script>
</head>
<style>
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateY(150px);
}
.my-enter-active,
.my-leave-active{
transition: all 0.6s linear;
}
</style>
<body>
<div id="app">
<h1>使用过渡类名实现动画</h1>
<input type="button" value="button" @click="change2">
<!-- 使用transition标签把动画的内容包裹起来
自定义v-前缀，给transition 加 name-->
<transition name="my">
<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>