HarmonyOS List中ListItem插入怎么加入动画？

Question

我在List中插入数据时，希望的时ListItem从下面插入往上顶的一个动画，有没有什么方案实现？

Answer 1

可使用animateTo搭配transition实现，参考文档见链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-transition-animation-within-component-0000001500755277-V2\#section66304713316，

List的高度超过了屏幕，需要显示新插入的一条的动画，并让列表滑动到最底部,可以给list添加一个ListScroller并在animateTo回调中添加this.listScroller.scrollEdge(Edge.End)，参考代码如下：

@Entry
@Component
struct ListDemo {
  @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)
  }
}