Visual Guide to Screen Transitions
This guide shows you the available effects for screen transitions.
You can apply any effect by setting the
within the screen's CSS style, e.g.:
layout: horizontal-shrink | vertical-shrink | center | bottom;
Direction of the Transition
Screen transitions may have a direction - when you show a screen with a defined
screen-change-animation, the animation will be played in the forward mode. When
you are showing a screen without a defined
screen-change-animation and the previous
screen has a defined animation, the animation will be played in the backward direction.
When both the previous as well as the next screen do have a
animation of the next screen will take precedence and it will be played in the forward direction.
The only exception to this rule is when the previous screen is an Alert - in that case the
screen-change-animation will be played in the backward direction, even
if the next screen has also a defined animation.
Note that not all animations do honor the direction of the transition.
You can override the automatic direction detection with the
screen-change-animation-direction CSS attribute that can have
backward as values:
Duration of the Transition
Most transitions can be timed using the
screen-change-animation-duration CSS attribute. The default duration is 400ms.
Acceleration Function of the Transition
The acceleration of the transition is calculated in the same way as for CSS animations. You can specify a function for the forward-running
and another one for the backward-running transition:
Specifying Animations Programmatically
Sometimes you want to specify which transition is being used when displaying a screen. You can do this by specifying a style when calling
style then needs to contain a
screen-change-animation CSS attribute.
display.setCurrent( nextScreen );
The following movies show the main menu as the last screen and the
popup alert as the next screen, before returning to the main menu again.