vue的transition demo（配合create-keyframe-animation使用）

< 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 >