createTransition(
config?):TransitionWidget
Create a transition widget.
The widget will include a patch function, stores to track the animation states and a directive to apply the animation to an element.
• config?: PropsConfig<TransitionProps>
the props config of the transition
the transition widget
noAnimation(
element,direction,animated,signal,context):void|Promise<void>
A transition to show / hide an element without any animated. It uses the HTML display attribute.
• element: SSRHTMLElement
the element to animate
• direction: "show" | "hide"
the direction
• animated: boolean
Whether the transition should be animated.
• signal: AbortSignal
Signal allowing to stop the transition while running.
• context: object
Context of the current transition. It is reused between calls if the previous transition was stopped while running on the same element.
void | Promise<void>
Interface representing the API for managing transitions of an element.
hide: (
animated?) =>Promise<void>
Runs the transition to hide the element. It is equivalent to toggle with false as the first parameter.
• animated?: boolean
whether the transition should be animated. If the parameter is not defined, the animated property is used.
Promise<void>
A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was already running, the promise never completes.
show: (
animated?) =>Promise<void>
Runs the transition to show the element. It is equivalent to toggle with true as the first parameter.
• animated?: boolean
whether the transition should be animated. If the parameter is not defined, the animated property is used.
Promise<void>
A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was already running, the promise never completes.
toggle: (
visible?,animated?) =>Promise<void>
Runs the transition to show or hide the element depending on the first parameter.
• visible?: boolean
whether the element should be made visible or not. If the parameter is not defined, the opposite of the current visible property is used.
• animated?: boolean
whether the transition should be animated. If the parameter is not defined, the animated property is used.
Promise<void>
A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was already running, the promise never completes.
Interface representing transition directives.
directive:
Directive
the transition directive
TransitionFn: (
element,direction,animated,signal,context) =>Promise<void> |void
Function that implements a transition.
• element: SSRHTMLElement
• direction: "show" | "hide"
• animated: boolean
• signal: AbortSignal
• context: object
Promise<void> | void
Properties for configuring a transition.
animated:
boolean
Whether the transition should be animated.
animatedOnInit:
boolean
If the element is initially visible, whether the element should be animated when first displayed.
initDone:
null|boolean
Whether initialization is finished. It determines which setting between TransitionProps.animated and TransitionProps.animatedOnInit is used to enable or disable animations.
If it is true, initialization is considered finished, and TransitionProps.animatedOnInit is no longer used.
Otherwise, initialization is considered unfinished and TransitionProps.animatedOnInit is used instead of TransitionProps.animated.
If it is null, it will be set to true automatically when the directive is called with a DOM element.
If it is false, it will not be updated automatically.
onHidden: () =>
void
Function to be called when the transition is completed and the element is not visible.
void
onShown: () =>
void
Function to be called when the transition is completed and the element is visible.
void
onVisibleChange: (
visible) =>void
Function to be called when the visible property changes.
• visible: boolean
new value of the visible property
void
transition:
TransitionFn
Transition to be called.
visible:
boolean
Whether the element should be visible when the transition is completed.
Transition state.
element:
null|HTMLElement
Reference to the DOM element.
elementPresent:
boolean
Whether the element to be animated is present in the DOM.
hidden:
boolean
Equals: ! visible && ! transitioning
shown:
boolean
Equals: visible && ! transitioning
transitioning:
boolean
Whether a transition is currently running.
visible:
boolean
Whether the element is visible or will be visible when the transition is completed.
TransitionWidget:
Widget<TransitionProps,TransitionState,TransitionApi,TransitionDirectives>
Represents a widget that handles transitions.
The properties required for the transition.
The state management for the transition.
The API interface for the transition.
The directives used in the transition.