自定义组件间如何实现从底部滑入滑出的效果

@Entry 
@Component 
struct ComponentTransition { 
  @State flag: boolean = true; 
 
  build() { 
    Stack({ alignContent: Alignment.Bottom }) { 
        if (this.flag) { 
          ComponentChild1({ flag: $flag }) 
            .transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } }) 
        } 
        if (!this.flag) { 
          ComponentChild2({ flag: $flag }) 
            .transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } }) 
        } 
    }.height('100%').width('100%') 
  } 
} 
 
@Component 
struct ComponentChild1 { 
  @Link flag: boolean 
 
  build() { 
    Column() { 
      Image($r('app.media.ic_banner01'))//resources\base\media路径 
        .width('100%') 
        .height(200) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    } 
  } 
} 
 
@Component 
struct ComponentChild2 { 
  @Link flag: boolean 
 
  build() { 
    Column() { 
      Image($r('app.media.ic_banner02'))//resources\base\media路径 
        .width('100%') 
        .height(200) 
        .onClick(() => { 
          animateTo({ duration: 1000 }, () => { 
            this.flag = !this.flag; 
          }) 
        }) 
    } 
  } 
}
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.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.