小程序 CSS跑马灯动画出现 "抖动"

Question

描述:CSS实现的跑马灯动画执行的时候,当滚动下面的ScrollView,跑马灯动画会出现顿挫感

Code

xxx.wxml

<ste-marquee tnt="喜报,喜报,喜报:本店5.1特庆:买一送二,买二送4"></ste-marquee>

<scroll-view 
            id="yyc"
            style="width:100%;height:{{viewHeight}}px;background-color:white;"
            scroll-with-animation
            bindscrolltolower="scrollViewToLower"
            bindscroll="scrollViewDidScroll"
            lower-threshold="300"
            scroll-top="{{srollViewYLocation}}"
            scroll-y
            >
            <view wx:for="{{1000}}" wx:key="*this">{{item}}</view>
</scroll-view>

marquee.css

@keyframes move {
  from {
   transform:translateX(100%);
  }
  to {
   transform:translateX(-100%);
  }
 }
 
.marquee_container{
  background-color: green;
  height: 50px;
  line-height: 50px;
}

.marquee_text{
  color:yellow;
  font-size: 14px;
  white-space: nowrap;
  animation-name: move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
  background-color: black;
}

点击运行代码片段

尝试过的方法:

1. 去掉scrollView所有的绑定的方法

期望: 替代方案 Or 可能出现问题的地方？

Answer 1

没能复现你说的问题，你可以分享代码片段。这个是我的代码片段 链接

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。