HarmonyOS List如何实现类似局部刷新时的动画效果？

Question

如题，请问怎么LazyForEach循环渲染时，在list有add或者delete操作时，怎么实现平滑过渡的动画效果。

Answer 1

您可以参考下：

@Entry
@Component
struct Page248267 {
  @State message: number[] = [1,2,3];
  @State num:number=4
  listcontroller:ListScroller=new ListScroller()
  build() {
    Column() {
      Stack(){
        List({scroller:this.listcontroller }){
          ForEach(this.message,(item:number)=>{
            ListItem(){
              Column(){
                Text(item.toString())
                  .width('100%')
                  .height(30)
              }.width('70%')
              .border({width:1})
              .justifyContent(FlexAlign.Center)
            }.margin({bottom:5})
            // .transition({ type: TransitionType.All, translate: { y: 30 } })
            .transition(TransitionEffect.translate({ y: 30 }))
          }, (item:number) => item.toString())
        }.width('100%')
      }
      .alignContent(Alignment.BottomStart)
      .layoutWeight(1)
      Button("添加")
        .onClick(()=>{

          animateTo({
            duration: 1000,
          }, () => {
            this.message.push(this.num)
            this.num++
            this.listcontroller.scrollEdge(Edge.End)
          })
        })
    }
    .justifyContent(FlexAlign.End)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)
  }
}