HarmonyOS 页面内的组件转场动画

@Entry  
@Component  
struct TransitionEffectExample2 {  
  @State flag: boolean = true;  
  @State show: string = 'show';  
  build() {  
    Column() {  
      Button(this.show).width(80).height(30).margin(30)  
        .onClick(() => {  
          // 点击Button控制Image的显示和消失  
          if (this.flag) {  
            this.show = 'hide';  
          } else {  
            this.show = 'show';  
          }  
          animateTo({ duration: 2000 }, () => {  
            this.flag = !this.flag;  
          });  
        })  
      if (this.flag) {  
        Image($r('app.media.icon')).width(200).height(200)  
          .transition(TransitionEffect.asymmetric(  
            TransitionEffect.move(TransitionEdge.BOTTOM).animation({  
              duration: 500,  
              tempo: 0.6,  
            }),  
            TransitionEffect.move(TransitionEdge.BOTTOM).animation({  
              duration: 500,  
              tempo: 0.6,  
            })  
          ))  
      }  
    }.width('100%')  
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.