# ractive-transitions-fade
*Find more Ractive.js plugins at [http://docs.ractivejs.org/latest/plugins](http://docs.ractivejs.org/latest/plugins)*
This transition fades an element in and out of view, using CSS transitions where possible.
```html
{{#if visible}}
this will fade in and out of view
depending on the value of `visible`
{{/if}}
```
## Installation
Install from npm...
```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.*
### CommonJS
```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' );
```
### AMD
```js
define([ 'ractive', 'ractive-transitions-fade' ], function ( Ractive, fade ) {
var ractive = new Ractive({
el: 'body',
template: myTemplate,
transitions: {
fade: fade
}
});
});
```
### ES6
```js
import Ractive from 'ractive';
var ractive = new Ractive({
el: 'body',
template: myTemplate,
transitions: { fade }
});
```
## Use as a `