/* 通过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>
