Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface CrossFadeOptions<E>

Type parameters

  • E: HTMLElement

Hierarchy

Index

Properties

Optional appear

appear: boolean

Boolean if the transition should also be triggered immediately once the component mounts. This is generally not recommended for server side rendering/initial page load so it is set to false by default.

Optional className

className: string

An optional className that should ge merged with the CSS transition class name based on the current transition stage.

Optional enter

enter: boolean

Boolean if the transition should allow for an enter animation once the transitionIn booleanis set to true.

Optional exit

exit: boolean

Boolean if the transition should allow for an exit animation once the transitionIn booleanis set to false.

Optional onEnter

onEnter: EnterHandler<E>

An optional enter handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired right after the transitionIn is set to true.

Optional onEntered

onEntered: EnterHandler<E>

An optional entered handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired once the transition has finished.

Optional onEntering

onEntering: EnterHandler<E>

An optional entering handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired almost immediately after the onEnter callback. However, if the repaint option was enabled, it will ensure the DOM as been repainted before firing to help with CSS transitions.

Optional onExit

onExit: ExitHandler<E>

An optional exit handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles.

This will be fired right after the transitionIn is set to false.

Optional onExited

onExited: ExitHandler<E>

An optional entered handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired once the transition has finished.

Note: If the temporary option was enabled, the rendered result will be false and the node actually won't exist in the DOM anymore.

Optional onExiting

onExiting: ExitHandler<E>

An optional exit handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles.

This will be fired almost immdiately after the onExit callback. However, if the repaint option was enabled, it will ensure the DOM as been repainted before firing to help with CSS transitions.

Optional ref

ref: Ref<E>

An optional ref that will get merged with the required ref for the transition to work.

Optional temporary

temporary: boolean

Boolean if the component should mount and unmount based on the current transitionIn stage with a default value of false. When this is false, the first result (rendered) in the return value array will always be true.

When this is set to true, the first result (rendered) in the return value array will be true only while the transitionIn option is true or the transition is still happening.

Note: Changing this option while the hook/component is mounted will not do anything. If you want to dynamically change the component's temporary state, you will need to also change the key to get the component to re-mount.

Optional transitionIn

transitionIn: boolean

Generated using TypeDoc