动态设置keyframes实现列表向上滚动动画

1、html部分

{{item.biOrgsName}}
{{item.taxAllAmount}}

2、js部分

// 动态设置keyframes实现向上滚动
// keyName动画名称,el执行动画的元素, time动画执行时间
setKeyframes(keyName, el, time = 1000) {
  // 因为元素列表需要重复一份,所以移动的高度是元素高度的一半
  const transformHeight = el.offsetHeight / 2;
  const keyframes = `@keyframes ${keyName}{
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-${transformHeight}px);
      }
  }`;
  const style = document.createElement('style');
  style.type = 'text/css';
  // 将 keyframes样式写入style内
  style.innerHTML = keyframes;
  // 将style样式存放到head标签
  document.getElementsByTagName('head')[0].appendChild(style);
  // 为需要设置滚动动画的元素设置动画值
  el.setAttribute(
    'style',
    // animation-fill-mode: forwards 将动画重置为第一帧,实现无缝的播放了
    `animation:${keyName} ${time}s linear infinite;animation-fill-mode: forwards`,
  );
},

3、调用

// 为实现动画无缝播放,列表元素的值应是[1,2,3,1,2,3]这样的形式,这样才能让123循环无缝播放
this.orderList = this.xsckRankList.concat(this.xsckRankList);
const el = document.querySelector('.xsck-list');
this.setKeyframes('myNove', el);

4、参考
(1) https://www.jianshu.com/p/b7b...
(2) https://blog.csdn.net/qq_4180...
(3) https://developer.mozilla.org...
(4) https://developer.mozilla.org...

你可能感兴趣的