# 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:
modules:{
steps:false
}
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:
steps:{
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):