目录

What should I do if flickers occur during the component disappearance animation?

Symptom

During the demo running, when a color block disappears, the upper left corner flickers.

@Entry
@ComponentV2
struct Index {
  @Local isShow: boolean = true;

  build() {
    Stack() {
      Stack() {
        if (this.isShow) {
          Row()
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
            .transition(TransitionEffect.OPACITY.animation({ duration: 150 }));
        }
      }
      .backgroundColor(Color.Green)
    }
    .width('100%')
    .height('100%')
    .onClick(() => {
      this.isShow = !this.isShow;
    });
  }
}

Solution

This is because when the variable is set to false, the component is removed from the tree. As a result, the inner Stack component has no content and moves to the upper left corner. You can fix the width and height of the inner Stack component to avoid this problem. The following is an example:

@Entry
@ComponentV2
struct DisappearanceAnimationOffsetFlicker {
  @Local isShow: boolean = true;

  build() {
    Stack() {
      Stack() {
        if (this.isShow) {
          Row()
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
            .transition(TransitionEffect.OPACITY.animation({ duration: 150 }))
        }
      }
      .width('100%')
      .height('100%')
      .onClick(() => {
        this.isShow = !this.isShow
      })
    }
  }
}