<style>
#box
{
width
:
100px
;
height
:
100px
;
background-color
:
red
}
<
/style>
</head>
<body>
<div
id
=
"app"
>
<input
type
=
"checkbox"
v-model
=
"show"
>
<!-- 在transition标签中使用js动画 需要使用enter事件和leave事件，分别表示入场动画事件和离场动画事件 -->
<transition
@
enter
=
"aniEnter"
@
leave
=
"aniLeave"
>
<div
id
=
"box"
v-show
=
"show"
></div>
</transition>
</div>
<script
src
=
"vue.js"
>
<
/script>
<script>
new
Vue
({
el:
"#app"
,
data:
{
show:
false
},
methods:
{
// 动画事件绑定的函数有两个参数 分别是做动画的元素对象和动画结束时的回调函数。
aniEnter
(
el
,
cb
){
// console.log(arguments)
el
.
style
.
opacity
=
0
;
let
opa
=
0
function
next
(){
requestAnimationFrame
(
function
(){
opa
+=
0.01
;
el
.
style
.
opacity
=
opa
;
if
(
opa
>=
1
){
cb
();
}
else
{
next
()
}
})
}
next
()
},
aniLeave
(
el
,
cb
){
// console.log("leave事件")
// 在动画事件绑定的函数中使用js代码执行动画，并在动画结束时调用cb回调函数。
let
opa
=
1
;
function
next
(){
requestAnimationFrame
(
function
(){
opa
-=
0.01
;
el
.
style
.
opacity
=
opa
;
if
(
opa
<=
0
){
cb
();
el
.
style
.
opacity
=
1
;
}
else
{
next
()
}
})
}
next
()
}
}
})
<
/script>
</body>
