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

点击删除时,被点击的那一个listItem慢慢滑出屏幕的左侧,然后下面的listItem再补齐位置;点击添加按钮时,整体的listItem下移给新添加的listItem空出位置,再从屏幕的上方滑出刚添加的listItem。

现在给每一个item添加转场动画再设置延迟后,上下滑动时出现的listItem也会有延迟动画。

使用LazyForEach,transition在每一次组件创建或销毁的时候会被调用,就会导致上下滑动时出现的listItem也出现延迟动画。

HarmonyOS
2024-05-26 15:22:05
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

点击button时,在animateTo中设置onFinish回调,添加TransitionEffect.IDENTITY。在添加或删除listItem动画结束后禁用转场效果。

示例代码:

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) 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 20:25:00
相关问题
list的add跟remove item入场出场动画
490浏览 • 1回复 待解决
list-item 根据boolean属性 动态设置class
3445浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item
5237浏览 • 1回复 待解决
如何实现自定义应用入场动画
409浏览 • 1回复 待解决
二级浮层的出场动画实现
347浏览 • 1回复 待解决
如何实现组件水波纹动画案例
469浏览 • 1回复 待解决
RichEditor添加删除、重载图片
438浏览 • 1回复 待解决
Listitem点击变色有什么好方法吗
769浏览 • 1回复 待解决
怎样删除添加的Module?
273浏览 • 1回复 待解决
如何全局设置页面转场动画
345浏览 • 1回复 待解决
动画lottie能否设置播放次数
776浏览 • 1回复 待解决
List组件如何设置多列
1032浏览 • 1回复 待解决