# Steps examples

The steps module is a powerful internal feature that can handle the show&hide of fragment elements by playing nicely with the internal Router as well.

By default, the steps module is active and the default selector is the class .step. This means that any HTML elements with that class name will be handled as fragments.

You can disable the module completely in case you need with:


A common use-case of steps is with lists, though. In this case we can enable it for all using the proper selector, thus, you don't need to specify the .step class:

With the next one, we are converting mixed elements, preserving the order of the selector:

The default order on the same selector can be overriden by using the attribute data-order specifing a number that will be used by a sorting function:

Steps can be used with any blocks that contains a DOM, such as an SVG.

# Transitions

You can change the transition type for each block passing an object like this:

  selector: 'li',
  transition: 'zoomIn'

Built-in transitions are:

  • fadeIn (default)
  • zoomOut
  • zoomIn
  • slideUp
  • slideDown

# Mode

There are two modes in this module.

  • sequential mode where each selector counts as a single step (default)
  • match mode where same selector values counts as a single step

When using the match mode, the selector value needs to be set at scene level.

# Out

There is an option to change the behavior of pre-entered elements. By default each fragment will persist in the scene after the transition. You can specify within the block level the out option to change that behavior, making the fragments transition out.

You can also mix that option across different blocks (this is very useful with the match mode):