A tiny ractive transitions plugin for animate.css-animations.

ractive-transitions-animatecss.js

/*
  Requires animate.css, and support for the 'transitionend' event. 
  (See https://developer.mozilla.org/en-US/docs/Web/Events/transitionend for browser support)
*/
(function ( global, factory ) {

    'use strict';

    // Common JS (i.e. browserify) environment
    if ( typeof module !== 'undefined' && module.exports && typeof require === 'function' ) {
        factory( require( 'ractive' ) );
    }

    // AMD?
    else if ( typeof define === 'function' && define.amd ) {
        define([ 'ractive' ], factory );
    }

    // browser global
    else if ( global.Ractive ) {
        factory( global.Ractive );
    }

    else {
        throw new Error( 'Could not find Ractive! It must be loaded before the ractive.transitions.animatecss plugin' );
    }

}( typeof window !== 'undefined' ? window : this, function ( Ractive ) {

    'use strict';

    var ANIMATION_END_EVENT = (function(){
        var eventName,
            ANIMATION_END_EVENT_NAMES = {
                'animation': 'animationend',
                '-o-animation': 'oAnimationEnd',
                '-moz-animation': 'animationend',
                '-webkit-animation': 'webkitAnimationEnd',
                '-ms-animation': 'animationend'
            },
            fakeEl = document.createElement('fakeelement');

        for (eventName in ANIMATION_END_EVENT_NAMES) {
            if (typeof(fakeEl.style[eventName]) !== 'undefined') {
                return ANIMATION_END_EVENT_NAMES[eventName];
            }
        }
        return null;
    })();

    var animateCSS = function ( t, transition ) {
        // Process parameters. No error checking for non-existing transitions(!!)
        transition = transition || (t.isIntro ? Ractive.transitions.animatecss.defaultIntro : Ractive.transitions.animatecss.defaultOutro);

        // add 'animated' class if not present
        if(!t.node.classList.contains('animated')) t.node.classList.add('animated');
        // add the transition class, the transitions starts immediately
        t.node.classList.add(transition);
        // After the animation has ended, call `t.complete()` to signal that we've finished
        t.node.addEventListener(ANIMATION_END_EVENT,function(){
            t.node.classList.remove(transition);
            t.complete();
        });
    };

    Ractive.transitions.animatecss = animateCSS;
    Ractive.transitions.animatecss.defaultIntro = 'slideInDown';
    Ractive.transitions.animatecss.defaultOutro = 'slideOutUp';

}));

After the animation has ended, you'd better remove event listener.