javascript - 如何使列表项滚动动画看起来连续/无限

Question

我有 3 个列表项，每 3 秒向上旋转一次。我正在使用 transformY 属性来做这件事。问题是，当它到达最后一个元素时，它会循环返回，从而产生重新开始的效果。

如何通过在最后一项之后继续向上旋转来使这种效果看起来连续/无限？

setInterval(function() {
  var currActiveItem = $('.list span').css('transform');

  if (currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
    $('.list span').css('transform', 'translateY(-67px)');
  } else if (currActiveItem == "matrix(1, 0, 0, 1, 0, -67)") {
    $('.list span').css('transform', 'translateY(-134px)');
  } else {
    $('.list span').css('transform', 'translateY(0)');
  }
}, 3000);

.transformed-z-0 {
  transform: translateZ(0);
}

.list {
  position: fixed;
  overflow: hidden;
  left: 0;
  width: 100%;
  height: 67px;
}

.list-item {
  display: block;
  height: 67px;
  transition: all 0.7s ease-in-out;
  transform: translateY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1 class="transformed-z-0">
  <span class="list">
    <span class="list-item">1</span>
  <span class="list-item">2</span>
  <span class="list-item">3</span>
  </span>
  <br> Some more text
</h1>

Answer 1

一种方法可以是:

• 克隆列表末尾的第一个元素(以获得正确的动画)
• 当你到达真正的第一个元素时禁用动画
• 按预期重启动画

    var firstElem = $('.list span').first().clone();
    $('.list').append(firstElem);
    
    setInterval(function(){
        var currActiveItem = $('.list span').css('transform');

        if(currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") {
          $('.list span').removeClass('no-transition');
          $('.list span').css('transform', 'translateY(-67px)');
        }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -67)"){
          $('.list span').css('transform', 'translateY(-134px)');
        }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -134)"){
          $('.list span').css('transform', 'translateY(-201px)');
        }else {
          $('.list span').addClass('no-transition');
          $('.list span').css('transform', 'translateY(0)');
        }
      }, 3000);

    .transformed-z-0 {
        transform: translateZ(0);
      }

      .list {
        position: fixed;
        overflow: hidden;
        left: 0;
        width: 100%;
        height: 67px;
      }

      .list-item {
        display: block;
        height: 67px;
        transition: all 0.7s ease-in-out;
        transform: translateY(0);
      }
      
      .no-transition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
      }

<h1 class="transformed-z-0">
  <span class="list">
    <span class="list-item">1</span>
    <span class="list-item">2</span>
    <span class="list-item">3</span>
  </span>
  <br>
  Some more text
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>