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
相关问题
二级浮层出场动画实现
1233浏览 • 1回复 待解决
HarmonyOS listitem如何保存状态
518浏览 • 2回复 待解决
HarmonyOS listitem交互效果处理
679浏览 • 1回复 待解决
怎么获取List里面每个itemposition?
435浏览 • 1回复 待解决
HarmonyOS中List是如何加载item
428浏览 • 2回复 待解决
HarmonyOS listitem支持托动效果吗?
438浏览 • 1回复 待解决
如何实现自定义应用入场动画
1213浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
1157浏览 • 1回复 待解决
如何实现list折叠动画效果
837浏览 • 1回复 待解决
Listitem点击变色有什么好方法吗
2666浏览 • 1回复 待解决
HarmonyOS List动画效果
417浏览 • 1回复 待解决