Appearance/disappearance transition

Transition Effect Interfaces

Transition Effects

Transition Effect	Description	Animation
IDENTITY	Disables the transition effect.	None.
OPACITY	The default transition effect, which is a transparency transition.	When appearing, transparency goes from 0 to 1; when disappearing, transparency goes from 1 to 0.
SLIDE	A sliding transition effect.	When appearing, slides in from the left side of the window; when disappearing, slides out to the right side of the window.
translate	Creates a transition effect by setting component translation.	When appearing, translates from the value set by the translate interface to the default value of 0; when disappearing, translates from the default value of 0 to the value set by the translate interface.
rotate	Creates a transition effect by setting component rotation.	When appearing, rotates from the value set by the rotate interface to the default value of 0; when disappearing, rotates from the default value of 0 to the value set by the rotate interface.
opacity	Creates a transition effect by setting the transparency parameter.	When appearing, transparency goes from the value set by opacity to the default transparency of 1; when disappearing, transparency goes from the default transparency of 1 to the value set by opacity.
move	Creates an effect of coming from a specific window edge using TransitionEdge.	When appearing, slides in from the TransitionEdge direction; when disappearing, slides out to the TransitionEdge direction.
asymmetric	Combines asymmetric appearance and disappearance transition effects.	- appear: The transition effect for appearance. - disappear: The transition effect for disappearance. When appearing, uses the appear TransitionEffect; when disappearing, uses the disappear TransitionEffect.
combine	Combines other TransitionEffect effects.	Combines other TransitionEffect effects to take effect together.
animation	Defines the animation parameters for the transition effect:	- If not defined, it follows the animation parameters of animateTo. - Does not support configuring animation parameters via the animation interface of a component. - The onFinish of animation in TransitionEffect is not effective. When called, the order is top to bottom, and the animation of the upper TransitionEffect also affects the lower TransitionEffect.

Creating TransitionEffect

// When appearing, it will be the叠加 of all appearance transition effects, and when disappearing, it will be the叠加 of all disappearance transition effects
// Used to illustrate the animation parameters followed by each effect
private effect: object =
  TransitionEffect.OPACITY // Creates a transparency transition effect; since the animation interface is not called here, it will follow the animation parameters of animateTo
    // Uses the combine method to add a scaling transition effect and specifies the springMotion(0.6, 1.2) curve
    .combine(TransitionEffect.scale({ x: 0, y: 0 }).animation({ curve: curves.springMotion(0.6, 1.2) }))
    // Adds a rotation transition effect; the animation parameters here will follow the upper TransitionEffect, which is springMotion(0.6, 1.2)
    .combine(TransitionEffect.rotate({ angle: 90 }))
    // Adds a translation transition effect; the animation parameters will follow the closest preceding TransitionEffect with animation, which is springMotion(0.6, 1.2)
    .combine(TransitionEffect.translate({ x: 150, y: 150 }))
    // Adds a move transition effect and specifies the springMotion curve
    .combine(TransitionEffect.move(TransitionEdge.END).animation({ curve: curves.springMotion() }))
    // Adds an asymmetric transition effect; since animation is not set here, it will follow the animation effect of the upper TransitionEffect, which is springMotion
    .combine(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0, y: 0 }), TransitionEffect.rotate({ angle: 90 })));

Applying Transition Effects to Components

Set the transition effect to a component using the transition interface.

Text('test')
  .transition(this.effect)

Triggering Transitions by Adding or Removing Components

@State isPresent: boolean = true;
// ...
if (this.isPresent) {
  Text('test')
    .transition(this.effect)
}
// ...
// Controlling the addition or removal of components
// Method 1: Place the control variable within the animateTo closure; TransitionEffect without animation interface definition will follow animateTo's animation parameters
this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
  this.isPresent = false;
})

// Method 2: Directly control the addition or removal of components; animation parameters are configured by the animation interface of TransitionEffect
this.isPresent = false;