Transitions

Normally, when an element is rendered, it just sort of gets plonked on the page. With Ractive you have more control.

Step 1

You can specify intro transitions:

<div fade-in>
  This div will fade into view
</div>

Try adding intros to the three buttons in the template, choosing from fade, slide and fly, which have been included on this page.

As with custom events, transitions are distributed as plugins.

Where possible, Ractive uses CSS transitions, but in older browsers it will fall back to timer-based animation.

Step 2

Similarly, we can specify outro transitions. When an element is no longer needed on the page, it will exit gracefully.

Try adding outro transitions to the three buttons;

<button fade-in fly-out on-click='["show", 2]'>
  Click me!
</button>

Execute the code. Aaargh! It looks horrible!

That's because new elements are being rendered before the old ones get removed from the DOM. What we need to do is chain the transitions – trigger the removal, wait, and then trigger rendering of the new element.

Calling ractive.set() returns a Promise, which resolves on completion of any transitions that are caused by the change. So you can do this:

ractive.on({
  show: function ( event, which ) {
    ractive.set( 'visible', null ).then( function () {
      ractive.set( 'visible', which );
    });
  }
});

Several methods return a promise, not just ractive.set() – ractive.update(), ractive.teardown(), ractive.render(), and all of the array methods such as ractive.push().

Step 3

You can pass in parameters to add fine-grained control over transitions:

<button intro='fade:{duration:2000}'
        outro='fly'
        on-tap='show:2'>
  Click me!
</button>

The transition function will receive an argument corresponding to these parameters. In this case, the default duration property will be overridden, so the fade transition will take 2000 milliseconds (more popularly known as '2 seconds').

By convention, if you pass in a number, it will be treated as the duration property:

<button fade-in="2000"
        fly-out
        on-click="['show', 2]">
  Click me!
</button>

In place of a number, you can use fast (200 milliseconds) or slow (600 milliseconds), just like jQuery.

The parameters available to you depend on the transition.