Vaadin Router allows you to animate transitions between routes. In order to add an animation, do the next steps:
animate property set to true@keyframes animations, either in the view Web Component styles or in outside CSS.leaving and .entering classes to use the animations
The demo below illustrates how to add the transition between all the routes in the same group.
You might also add the transition for the specific routes only, by setting the animate
property on the corresponding route config objects.
To run the animated transition, Vaadin Router performs the actions in the following order:
entering CSS class on the new view componentleaving CSS class on the old view component, if any@keyframes animation applies, and wait for it to complete
In the basic use case, using single type of the animated transition could be enough to make the web app
looking great, but often we need to configure it depending on the route. Vaadin Router supports this feature
by setting object value to animate property, with the enter and
leave string keys. Their values are used for setting CSS classes to be set on the views.
Note that you can first configure animated transition for the group of routes, and then override it for the single route. In particular, you can switch back to using default CSS classes, as shown in the demo below.