Barba allows you to define a global transition, that run everywhere on your site, and/or specific transitions using rules that run when navigating from one page to another.
They use all base
nameis optional, but recommended.
Rules define the “transition resolution”, concretely “selecting the right transition to use”.
This allows you to create specific transitions, based on namespace, route or custom logic.
Rules keyword(s) define the logic to follow, if your transition should play when leaving the
from, and/or when entering the
They must contain a set of condition(s), and run within a priority order:
|Priority||Keyword||Rule apply to…||Rule apply when…|
Note that you can use
Rules condition(s) define the logic to fulfilled inside keyword(s) in order to play the transition.
They are defined within keyword(s):
Condition(s) can be applied to a namespace, route or through a custom function.
Barba will then select the right transition to use and play it only if all conditions are fulfilled.
||String | String||none||
||String | String||none||
Any conditions can be used within
The “transition resolution” follows this steps:
- Condition(s) priority
- Keyword(s) priority
- Declaration order
The common/default behaviour is to start leave as soon as possible.
Then enter will be called when leave ends AND next page is “available”: fetched or cached.
If you use some
tologic, Barba can not predict and select the right transition until the next page is available. This also applies when using the sync mode, but this does not apply if
tois used with
routeproperty because “next route” is known when the click occurs.
Bear with this!
You can combine multiple rules on each transition.
Here is an example of what you could do with multiple rules:
Based on the priority order, Barba will play the
- if the link you clicked on contains a
- if you come from the
- if you are navigating to the
itemnamespace AND from the
Barba have an internal mechanism called “self transition”: it allows you to call a transition when navigating into the same page. Just define a transition with the “magic” name
self, then links that point to your current page, like
page.html#hash, will call this specific transition.
Like a regular transition, this one can use all base hooks.
A mode that indicates whether leave and enter hooks should “play together”.
The sync mode is disabled by default, but you can easily enable it using the
This involves waiting until the next page is available: fetched or cached.
In another words, regarding the legacy example, if you have an opacity transition from
1 -> 0 for
0 -> 1 for
sync: falsewill play the
leavetransition first, making your page content goes transparent, then play the
entertransition, making the next page content goes opaque (two step transition)
This will immediately run the
leavehooks on user click, then it will wait for the next page to be “ready” (prefetched) in order to run the
entertransition with the other hooks.
sync: truewill make the current page goes transparent while the next page becomes opaque at the same time (crossfade transition)
This will do nothing on user click, even if doing something inside
beforeLeavehooks, this mode will always wait for the next page to be “ready” (prefetched) in order to run both