/* 通过class设置动画方式，一共需要6个class */
/* 设置入场动画开始时的样式 */
.v-enter,.v-leave-to{
opacity: 0;
}
/* 设置入场动画过程中的样式 */
.v-enter-active,.v-leave-active{
transition: all 0.7s;
}
/* 设置入场动画结束后的样式 */
.v-enter-to,.v-leave{
opacity: 1;
}
<body>
<div id="app">
<input type="checkbox" v-model="show">
<!-- v-show和v-if在显示和隐藏之间切换时 是不带动画的，如果需要添加动画，要使用transition标签 -->
<transition>
<!-- v-show和v-if写在transition标签中时，当元素需要隐藏时，不会立刻隐藏，而是执行离场动画，动画结束之后才隐藏。 -->
<div id="box" v-show="show"></div>
</transition>
<!-- 如果在页面中需要执行多个动画，则可以为transition标签设置name属性，在css中单独为这个transition设置动画方式 -->
<transition name="ani">
<div id="b2" v-show="show"></div>
</transition>
</div>
<script src="vue.js"></script>
<script>
// 动画的区别
// 简单动画 少帧
new Vue({
el:"#app",
data:{
show:false
}
})
</script>
</body>