The Transition service allows to display or hide content smoothly through an animation. At its heart, a transition is a Directive managing the visibility of inner content by attaching / detaching classes.
Creating and attaching a transition is straighforward! Simply create a transition service using the factory createTransition and attach the provided directive to a dom element.
Let's see this in action by implementing a Collapse component:
AgnosUI provides several transition functions to use (collapse vertical or horizontal, fade in/out) but you may create your own using the createSimpleClassTransition utility and a bit of css. Here is another example with a flip animation:
When creating your own, remember to respect the user preferences and the media query prefers-reduced-motion.
You can configure a transition using the following properties:
TransitionFn : the transition function that will be run boolean : whether the element should be visible when the transition is completed boolean : whether the transition should be animated boolean : if the element is initially visible, whether the element should be animated when first displayed () => void : function to be called when the transition is completed and the element is visible () => void : function to be called when the transition is completed and the element is not visible (visible: boolean) => void : function to be called when the visible property changes The state of the transition will include the stores:
boolean : whether the element is visible or will be visible when the transition is completed boolean : whether the element to be animated is present in the DOM HTMLElement | null : reference to the DOM element boolean : whether a transition is currently running boolean : whether the element is visible and not transitioning boolean : whether the element is not visible and not transitioning You may play around the properties and see the stores updated with the following example: