Transitions

edit this page

Transitions allow you to control how elements are first rendered and how they are removed from the DOM. They are added with transition directives in the form of ${name}-in, ${name}-out, and ${name}-in-out, where each suffix corresponds to when the element is rendered, unrendered, or both, respectively.

<div fade-in>This element will fade in gradually when it renders</div>

This works because (or rather, if) Ractive is able to find a fade function on either ractive.transitions (i.e. instance-specific transitions) or Ractive.transitions (i.e. globally-available transitions).

Transitions can also be passed arguments in a list as the value of their attribute directive. Most transitions use a single options argument, so they typically look something like <div fade-in="{ duration: 300, delay: @index * 5 }">...</div>.

To start using transitions, download them from the Plugins page.

Creating transition plugins

See Writing transition plugins to learn how to create your own transitions.