- 过渡效果
// 1. 标签一样的情况下 要设置key才能启动动画
// 2. mode可以指定不同的内容显示状态
// 3. transition里面的name属性可以自定义
<transition name="fade" mode="out-in">
<p v-if="show" key="1">one part </p>
<p v-else key="2">two part</p>
</transition>
<style>
/*自定义动画*/
.fade-enter-active,.fade-leave-active{
transition: opacity .5s ease-out;
}
.fade-enter, .fade-leave-active {
opactiy: 0;
}
</style>