HarmonyOS 列表动画效果

第一步：判断@列表是否展示的标识，在切换时，外层嵌套animateTo方法，如：

animateTo({ duration: 500 }, () => {
  this.isATShown = false
})
1.
2.
3.

第二步：@列表所在组件（Scroll），增加属性：

.transition(TransitionEffect.translate({y: 1})) 
1.

第三步：确保@列表所在组件（Scroll）下方的组件均有背景颜色，避免出现遮盖不住的情况。示例代码：

// xxx.ets
@Entry
@Component
struct AttrAnimationExample {
  @State scrollShow: boolean = false
  build() {
    Stack(){
      Column() {
        Button('@')
          .onClick(() => {
            animateTo({ duration: 1000 }, () => {
              // 动画闭包内控制Image组件的出现和消失
              this.scrollShow = !this.scrollShow
            })

          })
          .margin(30)
        if(this.scrollShow) {
          Scroll(){
            Column().width(40).height(90).backgroundColor(Color.Red)
          }
          .width('100%')
          .backgroundColor('#eee')
          .transition(TransitionEffect.translate({y: 1}))
        }
        Column()
          .width('100%')
          .height(300)
          .backgroundColor('#ccc')
      }.width('100%')
    }
    .width('100%')
    .height('100%')
    .align(Alignment.Bottom)
  }
}
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.