ractive-transitions-fade

Find more Ractive.js plugins at http://docs.ractivejs.org/latest/plugins

This transition fades an element in and out of view, using CSS transitions where possible.

``html
{{#if visible}}


`bash
npm install ractive-transitions-fade
`

...or download it and add it as a script tag to your page:

`html


`

Use as a module...

Note: previous versions of this plugin would 'self-register'. If you are using a module system such as Browserify, Webpack or RequireJS, that's no longer the case - you must explicitly register the plugin.

$3

`js
var Ractive = require( 'ractive' );

// To use the fade transition with a specific instance
var ractive = new Ractive({
el: 'body',
template: myTemplate,
transitions: {
fade: require( 'ractive-transitions-fade' )
}
});

// To use it with components
MyComponent = Ractive.extend({
template: componentTemplate,
transitions: {
fade: require( 'ractive-transitions-fade' )
}
});

// To make it globally available to all instances
Ractive.transitions.fade = require( 'ractive-transitions-fade' );
`

$3

`js
define([ 'ractive', 'ractive-transitions-fade' ], function ( Ractive, fade ) {
var ractive = new Ractive({
el: 'body',
template: myTemplate,
transitions: {
fade: fade
}
});
});
`

$3

`js
import Ractive from 'ractive';

var ractive = new Ractive({
el: 'body',
template: myTemplate,
transitions: { fade }
});
`

Use as a