Vue-transiton Component

A component to perform CSS transition using Vue.js.

It allows you to trigger a transition whenever you like.

Installation

npm install vue-transition

Or just include the file using a <script> tag.

Usage

HTML:

<div id="demo">
   <transition id="trans" options="all 0.5s ease" source="alert"></transition>
</div>

CSS:

.alert{
    background-color:red;
}

Javascript:

new Vue("#demo",{
    /*...your code here...*/
    methods{
        play:function(){
            this.transitions["trans"].play()
                                    .then(/*...your code here...*/);
        },
        rollback:function(){
            this.transitions["trans"].rollback()
                                        .then(/*...your code here...*/);
        }
    }
})

CommonJs

Vue.use(require('Vue-transiton'));
/*...your code here...*/

API reference

Transitions

• transition.play(options->string)->Promise : This function will apply the transition by adding the source class you set .

options : the options string of transition, like"all 0.5s ease" . By default , the options used will be what you set on the transition component.

The function returns a Promise that will resolve on the html element event transitionend. If you don't like the Promise styled API, Just listen to the transitionend Vue event in the parent component.

• transition.rollback(options->string)->Promise: This function works just like transition.play.

  The only difference is this one removes the source class you set to make a rollback effect.

Animations

• animation.play->Promise: This function will apply the animation by adding the source animation class you set or continue a paused animation.

  The returned Promise will resolve on html event animationendor the same one named with -webkit. And it will dispatch a Vue event animationend(No -webkit here) together with its id.

• animation.pause->Promise: This function will pause the play animation by setting animation-play-state to "paused". So if you emit multiple animations on one element at the same time, the pausefunction will pause them all.

  The returned Promise will directly resolve.

• animation.restrat->Promise: This function will stop the current animation and then restart it.

  Also, you can use it to restart a animation that is specified to work only once.

  The returned Promise will resolve on animationend as aniamtion.play.

• Events: CSS animations emit three event: animationstart,animationend,animationiteration. All these will be wrapped as Vue events with the same name.

  You can listen to them in any of the parent components, as they'll be dispatched upwards.

License

MIT