H5 animate动画切换页面后返回卡顿失效

问题描述

抽奖转盘用户抽奖记录滚动效果
首次进入页面没问题，但切换页面再返回当前页面会卡住
在电脑端调试、android都没有问题
IOS会卡住

分析原因：（来源百度）

数据的变化，引起scroll-wrapper总长度的变化。总长度的变化需要重新计算动画效果。iOS在这里没有处理好。

解决代码

元素dom代码

<ScrollBlock>
   <StoneList listLength={userGoods.length}>
     {
       userGoods?.map((item, index) => {
         return (
         <GetPrizesRow key={index}>用户 {item.phone} 抽中了{item.shopName}</GetPrizesRow>
         )
       })
     }
   </StoneList>
 </ScrollBlock>

样式代码

• 根据滚动内容长度判断显示的动画效果

const StoneList = styled.div<{
  listLength: number
}>`
  position: absolute;
  bottom: -5px;
  white-space: nowrap;
  animation: ${(props) => (props.listLength > 0 ? ItemAnimation : ItemAnimationBak)} 80s infinite linear normal;
  animation-delay: 0.3s;
  padding: 5px;
`

const ItemAnimation = keyframes`
   0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
`
const ItemAnimationBak = keyframes`
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
`

参考来源： https://juejin.cn/post/6844903682677407751