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
>