<style>
#box
{
width
:
100px
;
height
:
100px
;
background-color
:
red
;
}
/* 通过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
;
}
/* 设置元素离场动画开始时的状态 */
/* .v-leave{
opacity: 1;
} */
/* 设置元素离场动画过程中的状态 */
/* .v-leave-active{
transition: all 0.7s;
} */
/* 设置元素离场动画结束时的状态 */
/* .v-leave-to{
opacity: 0;
} */
#b2
{
width
:
100px
;
height
:
100px
;
background-color
:
greenyellow
;
}
/* v- 开头的动画样式是为匿名transition标签设置的样式，还可以使用xxx-center为某种transition标签设置动画样式 */
.ani-enter
{
height
:
0
!important
;
}
.ani-enter-active
{
transition
:
all
0.7s
;
}
.ani-enter-to
{
height
:
100px
;
}
.ani-leave
{
width
:
100px
;
}
.ani-leave-active
{
transition
:
all
0.7s
;
}
.ani-leave-to
{
width
:
0px
!important
;
}
<
/style>
</head>
<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>
