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.
{{#if visible}} this will fade in and out of view depending on the value of `visible` {{/if}}
Installation
Install from npm...
npm install ractive-transitions-fade
...or download it and add it as a script tag to your page:
<!-- must go first! -->
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
var Ractive = ; // To use the fade transition with a specific instancevar ractive = el: 'body' template: myTemplate transitions: fade: ; // To use it with componentsMyComponent = Ractive; // To make it globally available to *all* instancesRactivetransitionsfade = ;
AMD
;
ES6
; var ractive = el: 'body' template: myTemplate transitions: fade ;
<script>
tag
Use as a If you include ractive-transitions-fade as a script tag, it will 'self-register' with the global Ractive
object, and all Ractive instances will be able to use it.
Parameters
You can specify the delay
, duration
and easing
parameters using the conventional syntax:
content
Both delay
and duration
are in milliseconds. The easing
value must be a valid CSS easing function (see http://cubic-bezier.com/).
License
Copyright (c) 2013-15 Rich Harris. Licensed MIT.