<style>
#box
{
width
:
100px
;
height
:
100px
;
background-color
:
red
}
@keyframes
come-in
{
0%{
transform
:
rotate
(
45deg
);
opacity
:
0
;
}
50%{
transform
:
rotate
(
45deg
);
opacity
:
1
;
}
100%{
transform
:
rotate
(
0
);
opacity
:
1
;
}
}
@keyframes
come-out
{
0%{
transform
:
rotate
(
0
);
opacity
:
1
;
}
50%{
transform
:
rotate
(
45deg
);
opacity
:
1
;
}
100%{
transform
:
rotate
(
45deg
);
opacity
:
0
;
}
}
/* 在transtion标签中使用关键帧动画，只需要设置 enter-active和leave-active两个class即可，在class中设置要执行的动画*/
.ani-enter-active
{
animation
:come-in
1s
;
}
.ani-leave-active
{
animation
:come-out
1s
;
}
#d2
{
width
:
500px
;
height
:
100px
;
background-color
:
rgb
(
0
,
255
,
136
) ;
}
.com
{
animation
:come-in
1s
;
}
.go
{
animation
:come-out
1s
;
}
<
/style>
</head>
<body>
<div
id
=
"app"
>
<input
type
=
"checkbox"
v-model
=
"show"
>
<transition
name
=
"ani"
>
<div
id
=
"box"
v-show
=
"show"
></div>
</transition>
<!-- 使用关键帧动画，也可以直接在transition标签中直接指定动画所在的class -->
<!-- 这样可以方便的使用第三方动画库（例如animate。css）中的关键帧动画 -->
<transition
enter-active-class
=
"rollIn animated"
leave-active-class
=
"hinge animated"
>
<div
id
=
"d2"
v-show
=
"show"
></div>
</transition>
</div>
<script
src
=
"vue.js"
>
<
/script>
<script>
new
Vue
({
el:
"#app"
,
data:
{
show:
false
}
})
<
/script>
</body>
