transition
Applies a transition (enter and/or leave) to a Tag. The enter-transition will be executed right after the Tag is mounted to the DOM. The leave-transition will be executed right before the Tag is removed from the DOM. Further operation of the MountPoint rendering the Tag is suspended until the leave-animation is done.
Receiver
the Tag the transition will be applied to
Parameters
definition of enter- and leave-transition
Applies a transition (enter and/or leave) to a Tag. The enter-transition will be executed right after the Tag is mounted to the DOM. The leave-transition will be executed right before the Tag is removed from the DOM. Further operation of the MountPoint rendering the Tag is suspended until the leave-animation is done.
Receiver
the Tag the transition will be applied to
Parameters
mandatory classes to control the enter-transition.
optional classes to define the starting point of the enter-transition
optional classes to define the end point of the enter-transition
mandatory classes to control the leave-transition.
optional classes to define the starting point of the leave-transition
optional classes to define the end point of the leave-transition
Applies a transition (enter and/or leave) to a Tag whenever a new value appears on a Flow.
The enter-transition will be executed when true appears on the Flow. The leave-transition will be executed when false appears on the Flow.
Processing of further operations will not wait for the animation to finish.
Fine-grained control
For special use cases, afterLeaveClasses and/or initialClasses can be applied. Setting them is useful in cases where fine-grained control over the transition is needed and the required classes cannot be set via Tag.className due to timing problems.
One example would be a use-case where hiding an element via CSS is combined with a transition that should be executed right before the element is hidden. Since the display property cannot be animated via CSS, the hidden class has to be manually applied after the transition has finished. In this case, using two separate calls to Tag.className and transition would lead to a race-condition.
Example to hide/show an element with a transition using Tailwind CSS:
val opened = storeOf(false)
div {
// initially hidden, faded in and out via the transition
transition(
on = opened,
transition = Transition(...),
hasLeftClasses = "hidden",
initialClasses = "hidden"
)
}Receiver
the Tag the transition will be applied to
Parameters
Flow to trigger the transition
definition of enter- and leave-transition
Classes that should be present whenever the leave animation has been executed. Present until the next enter transition is executed.
Classes that should initially be present, before any transition has been executed.
Applies a transition (enter and/or leave) to a Tag whenever a new value appears on a Flow.
The enter-transition will be executed when true appears on the Flow. The leave-transition will be executed when false appears on the Flow.
Processing of further operations will not wait for the animation to finish.
Fine-grained control
For special use cases, afterLeaveClasses and/or initialClasses can be applied. Setting them is useful in cases where fine-grained control over the transition is needed and the required classes cannot be set via Tag.className due to timing problems.
One example would be a use-case where hiding an element via CSS is combined with a transition that should be executed right before the element is hidden. Since the display property cannot be animated via CSS, the hidden class has to be manually applied after the transition has finished. In this case, using two separate calls to Tag.className and transition would lead to a race-condition.
Example to hide/show an element with a transition using Tailwind CSS:
val opened = storeOf(false)
div {
// initially hidden, faded in and out via the transition
transition(
on = opened,
enter = "transition duration-100 ease-out",
enterStart = "opacity-0 scale-y-95",
enterEnd = "opacity-100 scale-y-100",
leave = "transition duration-100 ease-in",
leaveStart = "opacity-100 scale-y-100",
leaveEnd = "opacity-0 scale-y-95",
hasLeftClasses = "hidden",
initialClasses = "hidden"
)
}Receiver
the Tag the transition will be applied to
Parameters
Flow to trigger the transition
mandatory classes to control the enter-transition.
optional classes to define the starting point of the enter-transition
optional classes to define the end point of the enter-transition
mandatory classes to control the leave-transition.
optional classes to define the starting point of the leave-transition
optional classes to define the end point of the leave-transition ram afterLeaveClasses Classes that should be present whenever the leave animation has been executed. Present until the next enter transition is executed.
Classes that should initially be present, before any transition has been executed.