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):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.
Promise<void>
hide: (
animated?) =>Promise<void>
• 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>
• 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>
• 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.
directive:
Directive<void|Partial<TransitionProps>>
the transition directive
TransitionFn: (
element,direction,animated,signal,context) =>Promise<void>
Function that implements a transition.
• element: SSRHTMLElement
• direction: "show" | "hide"
• animated: boolean
• signal: AbortSignal
• context: object
Promise<void>
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 propery
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,object,TransitionDirectives>