list添加或删除item需要设置入场出场动画典型案例

class BasicDataSource implements IDataSource { 
  private listeners: DataChangeListener[] = []; 
  private originDataArray: string[] = []; 
 
  public totalCount(): number { 
    return 0; 
  } 
 
  public getData(index: number): string { 
    return this.originDataArray[index]; 
  } 
 
  registerDataChangeListener(listener: DataChangeListener): void { 
    if (this.listeners.indexOf(listener) < 0) { 
      console.info('add listener'); 
      this.listeners.push(listener); 
    } 
  } 
 
  unregisterDataChangeListener(listener: DataChangeListener): void { 
    const pos = this.listeners.indexOf(listener); 
    if (pos >= 0) { 
      console.info('remove listener'); 
      this.listeners.splice(pos, 1); 
    } 
  } 
 
  notifyDataReload(): void { 
    this.listeners.forEach(listener => { 
      listener.onDataReloaded(); 
    }) 
  } 
 
  notifyDataAdd(index: number): void { 
    this.listeners.forEach(listener => { 
      listener.onDataAdd(index); 
    }) 
  } 
 
  notifyDataChange(index: number): void { 
    this.listeners.forEach(listener => { 
      listener.onDataChange(index); 
    }) 
  } 
 
  notifyDataDelete(index: number): void { 
    this.listeners.forEach(listener => { 
      listener.onDataDelete(index); 
    }) 
  } 
 
  notifyDataMove(from: number, to: number): void { 
    this.listeners.forEach(listener => { 
      listener.onDataMove(from, to); 
    }) 
  } 
} 
 
class MyDataSource extends BasicDataSource { 
  dataArray: string[] = []; 
 
  public totalCount(): number { 
    return this.dataArray.length; 
  } 
 
  public getData(index: number): string { 
    return this.dataArray[index]; 
  } 
 
  public addData(index: number, data: string): void { 
    this.dataArray.splice(index, 0, data); 
    this.notifyDataAdd(index); 
  } 
 
  // 在数据尾部增加一个元素 
  public AddLastItem(): void { 
    this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length.toString()) 
    this.notifyDataAdd(this.dataArray.length - 1) 
  } 
 
  public pushData(data: string): void { 
    this.dataArray.push(data); 
    this.notifyDataAdd(this.dataArray.length - 1); 
  } 
 
  public deleteData(index: number): void { 
    this.dataArray.splice(index, 1); 
    this.notifyDataDelete(index); 
  } 
} 
 
@Entry 
@Component 
struct MyComponent { 
  private data: MyDataSource = new MyDataSource(); 
  @State 
  transitionTime: TransitionEffect = (TransitionEffect.IDENTITY) 
 
  setDeleteAnimation() { 
    this.transitionTime = (TransitionEffect.opacity(0) 
      .animation({ 
        duration: 300, 
      })).combine(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END), 
      TransitionEffect.move(TransitionEdge.START))) 
  } 
 
  setAddAnimation() { 
    this.transitionTime = (TransitionEffect.opacity(0) 
      .animation({ 
        duration: 300, 
        delay: 500 
      })).combine(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.END), 
      TransitionEffect.move(TransitionEdge.START))) 
  } 
 
  aboutToAppear() { 
    for (let i = 0; i <= 20; i++) { 
      this.data.pushData(`${i}`) 
    } 
  } 
 
  @State index2: number = 100 
 
  build() { 
    List({ space: 3 }) { 
      LazyForEach(this.data, (item: string, index: number) => { 
        ListItem() { 
          Row() { 
            Text(item) 
              .fontSize(50) 
              .width('70%') 
              .height(80) 
              .fontSize(20) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .border({ width: 1 }) 
            Button('del') 
              .onClick(() => { 
                this.setDeleteAnimation() 
                animateTo({ 
                  duration: 800, delay: 300, curve: Curve.Linear, onFinish: () => { 
                    this.transitionTime = (TransitionEffect.IDENTITY) //动画结束时设置禁止转场 
                  } 
                }, () => { 
                  this.data.deleteData(this.data.dataArray.indexOf(item)) 
                }) 
              }) 
            Button('add') 
              .onClick(() => { 
                this.setAddAnimation() 
                // 点击添加数据 
                this.index2 = this.index2 + 1 
                animateTo({ 
                  duration: 500, curve: Curve.Smooth, onFinish: () => { 
                    this.transitionTime = (TransitionEffect.IDENTITY) 
                  } 
                }, () => { 
                  this.data.addData(0, "new Data" + this.index2) 
                }) 
              }) 
          } 
          .margin({ left: 10, right: 10 }) 
        } 
        .transition( 
          this.transitionTime) 
        .swipeAction({ 
          end: { 
            onAction: () => { 
              this.setDeleteAnimation() 
              animateTo({ duration: 1000 }, () => { 
                this.data.deleteData(this.data.dataArray.indexOf(item)) 
              }) 
            }, 
            actionAreaDistance: 56, 
            onEnterActionArea: () => { 
            }, 
            onExitActionArea: () => { 
            } 
          } 
        }) 
        .onAppear(() => { 
          console.info('cbl' + item) 
          // 即将触底时提前增加数据 
          if (item + 1 == this.data.totalCount().toString()) { 
            for (let i = 0; i < 10; i++) { 
              this.data.AddLastItem() 
            } 
          } 
        }) 
      }, (item: string) => item) 
    }.cachedCount(5) 
  } 
}