<
template
>
<
div
>
<
div
class=
"click"
@click="
onClick"
>click
</
div
>
<
transition
@enter="
onEnter"
@after-enter="
onAfter"
@leave="
onLeave"
@after-leave="
onAfterLeave"
>
<
div
class=
"box"
ref=
"box"
v-show="
flag"
></
div
>
</
transition
>
</
div
>
</
template
>
<
script
>
import
animations
from
'create-keyframe-animation'
export
default {
data() {
return {
flag:
false,
}
},
methods: {
onClick() {
this.
flag = !
this.
flag
},
onEnter(
e,
done) {
animations.
registerAnimation({
name:
'move',
animation: {
0
: {
transform:
'translateX(0px)'
},
50
: {
background:
'red'
},
100
: {
transform:
'translateX(200px)'
}
},
presets: {
duration:
1000,
easing:
'linear'
}
})
animations.
runAnimation(
this.
$refs.
box, {
name:
'move'
},
done)
},
onAfter() {
animations.
unregisterAnimation(
'move')
this.
$refs.
box.
style.
animation=
''
},
onLeave(
e,
done) {
animations.
registerAnimation({
name:
'move',
animation: {
0
: {
transform:
'translateX(200px)'
},
50
: {
background:
'red'
},
100
: {
transform:
'translateX(0px)'
}
},
presets: {
duration:
1000,
easing:
'linear'
},
})
animations.
runAnimation(
this.
$refs.
box, {
name:
'move'
},
done)
},
onAfterLeave() {
animations.
unregisterAnimation(
'move')
this.
$refs.
box.
style.
animation=
''
}
}
}
</
script
>
<
style
lang=
"stylus"
scoped
>
.box
width
100px
height
100px
background
black
transform
translateX(
200px)
</
style
>