list的add跟remove item的入场、出场动画

list的add跟remove item的入场、出场动画,实现类似swipeAction的删除动效。

HarmonyOS
2024-05-23 23:43:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xbibi

使用的核心API

List

transition:组件内转场主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效,主要用于容器组件中的子组件插入和删除时,提升用户体验。

核心代码解释

将转场动效提出,给出入场设置不一样的动效,注意设置转场延迟时间,不然会跟listItem有重叠效果,当出入场动画结束的时候,将转场动画设置为TransitionEffect.IDENTITY,避免出现上下滑动的时候出现转场动效。

  @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))) 
  }

实现效果

适配版本信息

SDK:4.1.0.53

IDE: 4.1.3.500

分享
微博
QQ
微信
回复
2024-05-24 23:30:31
相关问题
二级浮层出场动画实现
347浏览 • 1回复 待解决
如何实现自定义应用入场动画
405浏览 • 1回复 待解决
Listitem点击变色有什么好方法吗
769浏览 • 1回复 待解决
list-item 根据boolean属性 动态设置class
3431浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item
5224浏览 • 1回复 待解决
ArkTS runtime之前maple有什么区别
742浏览 • 1回复 待解决
ListContainer中Item能取消拖拽吗
4000浏览 • 1回复 待解决
Please verify and then add 'mergeRule' in the HAP
4861浏览 • 1回复 待解决
关于属性动画问题?
8867浏览 • 3回复 待解决
List及ListItem组件使用
543浏览 • 1回复 待解决
如何屏蔽List滑动事件
1013浏览 • 1回复 待解决
redis 中 List 操作是什么?
1722浏览 • 1回复 待解决