收藏
回答

list动态渲染时item上的animationend事件存在丢失情况

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 工具 7.0.3 2.0.4

- 当前 Bug 的表现(可附上截图)

list动态渲染时,若rerender前的某个item正在动画,rerender后该item的动画效果会消失,并且无法触发animationend事件。

给我的感觉是,虽然给列表的每个item都定义了key,但列表重新渲染后,key值保持不变的item似乎也重新渲染了,导致动画消失?


- 预期表现

list动态渲染时,rerender前的item上的animationend事件依然会触发。


- 提供一个最简复现 Demo

见代码片段。

点击“新增动画”可以新生成一个动画item无问题。连击快速生成两个及两个以上动画item时,即列表重新渲染后,第二个item的onanimationend事件不会触发。


困惑求救,感谢!


最后一次编辑于  02-10  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 烟雨海花 lwl
    烟雨海花 lwl
    02-10

    animation有延迟,如果你的点击时间间隔快于设定的时间,splice准备删除第一个的时候,第二个元素已经加进来了,第一个删除时,第二个准备删除,且下标为第一个元素的下标+1,但是等到第一个删除时,第二个元素的下标已经改变了,所以删除时为当时的小标,此时第二个元素已经不再原来的位置,连点三下,四下,以此类推

    02-10
    赞同 1
    回复 3
    • 欣欣向荣的万七七
      欣欣向荣的万七七
      02-12

      感谢回答。可是我已经考虑到这种情况,所以每次splice时是都是根据item的key去动态寻找的item的index,并不是它一开始在列表中的index。并且demo里是很明显没有触发animationend事件所致,此时还没有走到splice那一步。

      02-12
      回复
    • 烟雨海花 lwl
      烟雨海花 lwl
      02-12

      连续点击三或者四下,打印则有两次(让所有元素在同一个画面,以我的视角,基本上四个就是极限了),和点击一次或者两次,打印一次

      02-12
      回复
    • 欣欣向荣的万七七
      欣欣向荣的万七七
      02-12回复烟雨海花 lwl

      是的,打印是由animationend事件触发,此时刚好又伴随有list的rerender,所以我才猜测是item上的事件触发丢失。

      02-12
      回复
  • 云
    07-09

    遇到同样的问题,请问后面怎么解决的。

    07-09
    赞同
    回复 1
    • 欣欣向荣的万七七
      欣欣向荣的万七七
      08-27
      不好意思好久没登录了。后面…我就换了别的方式来达成目的= =
      08-27
      回复