<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
</div>
<style>
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(80px);
}
.v-enter-active, .v-leave-active {
transition: all 1s ease; /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
}
</style>
<transition-group>
<li v-for="(item, i) in list" :key="item.id">
{{item.id}} --- {{item.name}}
</li>
</transition-group>
<!-- 设置自定义别名 name="my" -->
<transition name="my">
<h6 v-if="flag">这是一个H6</h6>
</transition>
<!--后续就可以使用 my-enter、.my-leave-to 这些类名-->
<style>
.my-enter, .my-leave-to {
opacity: 0;
transform: translateY(70px);
}
</style>
只有出场动画、没有离场动画，这种就是属于半场动画。比如把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。半场动画，可以使用钩子函数来实现，做法是：基于钩子函数直接在methods中写入场动画的函数，不写离场动画的函数即可。
<!-- 这八个钩子函数（四个入场、四个离场）可以理解成是动画的生命周期 -->
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- DOM元素 -->
</transition>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
// 设置开始动画之前的起始状态
beforeEnter(el) {
// 第一个参数：el，表示要执行动画的那个DOM元素
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// el.offsetWidth 这句话，没有实际的作用，但是，如果不写，出不来动画效果，可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
el.style.transform = "translate(150px, 300px)"
el.style.transition = 'all 1s ease'
// done 是 afterEnter 函数的引用
done()
},
afterEnter(el) {
this.flag = !this.flag
}
}
})
</script>
