/ractive-animatecss

Primary LanguageJavaScriptMIT LicenseMIT

Ractive animate.css Transitions

Transitions for Ractive, using animate.css

This library lets you use any of the animate.css transitions as an Ractive intro or outro transition using the animate: prefix:

    <h2 intro="animate:TRANSITION_NAME">
      RAD
    </h2>

Full list of transitions are here.

Based on a gist from cfenzo


Usage

Note: these transitions are a self-registering CommonJS module, and in the browser requires a module system such as Webpack or Browserify.

npm install ractive-animatecss

ES5:

var Ractive = require('ractive');
require('ractive-animatecss');

ES6/2015+:

import Ractive from 'ractive';
import 'ractive-animatecss';

In Ractive template:

    <div intro="animate:bounceInDown" outro="animate:fadeOut">
      Cool
    </div>