ractive-transitions-slide travis-ci npm

Slide elements in and out of view

3 years after

ractive-transitions-slide

Find more Ractive.js plugins at ractivejs.org/plugins

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

{{#if visible}}
  <div intro-outro='slide'>
    this will slide in and out of view
    depending on the value of `visible`
  </div>
{{/if}}

Installation

Install from npm...

npm install ractive-transitions-slide

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

<script src='ractive.js'></script> <!-- must go first! -->
<script src='ractive-transitions-slide.js'></script>

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 = require( 'ractive' );

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

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

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

AMD

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

ES6

import Ractive from 'ractive';

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

Use as a <script> tag

If you include ractive-transitions-slide 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:

<div intro='slide:{"delay":500,"easing":"ease-out"}'>content</div>

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.

Related Repositories

awesome-javascript

awesome-javascript

stop starring this it's just a fork ...

locator

locator

Map locator image generator ...

awesome-javascript

awesome-javascript

:turtle: A collection of awesome browser-side JavaScript libraries, resources a ...

awesome-javascript

awesome-javascript

A collection of awesome browser-side JavaScript libraries, resources and shiny ...

awesome-javascript

awesome-javascript

A collection of awesome browser-side JavaScript libraries, resources and shiny ...


Top Contributors

Rich-Harris

Releases

-   v0.4.0 zip tar
-   v0.3.0 zip tar
-   v0.2.1 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar