javascript - TranslateX 与其他距离

Question

我制作了一个无限幻灯片，看起来像猫头鹰旋转木马“中心”(https://owlcarousel2.github.io/OwlCarousel2/demos/center.html)。
我的问题是，当第二张幻灯片与第一张幻灯片相距很远时，平滑的翻译会很长。

示例:translateX(-100px) => translateX(-1000px)。我不知道在这里写什么JS。这是我在 codepen 中的代码(我希望当我点击翻译时会快速看起来像猫头鹰旋转木马，我不需要拖动事件)。

感谢您的帮助。

var init = 120;
var listSlide = document.getElementById('list-slide');
listSlide.style.width = 120*8 + 'px';


function slideFirst() {
  var init = -120;
  listSlide.style.transform = "translateX(" + init + "px)";
}

#list{
  width: 480px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.list-inner{
  height: 100%;
  transition: transform 0.25s ease;
}

.list-inner .item{
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
}

<div class="frame">
  <div id="list">
    
    <div id="list-slide" class="list-inner" style="transform: translateX(-720px)">
      <div class="item">Item 01</div>
      <div class="item">Item 02</div>
      <div class="item">Item 03</div>
      <div class="item">Item 04</div>
      <div class="item">Item 05</div>
      <div class="item">Item 06</div>
      <div class="item">Item 07</div>
      <div class="item">Item 08</div>
    </div>
    
  </div>
  
  <button onclick="slideFirst()">Click</button>
</div>

我尝试删除过渡并在之后添加它，但它不起作用。

var trans = -100;// a some distance
listSlide.style.transition = "all 0.25s ease 0s";

setTimeout(function(){
   listSlide.style.transition = "all 0s ease 0s";
   listSlide.style.transform = 'translateX(' + trans + 'px)';
}, 10);

Answer 1

这是我为您提供的解决方案。我更改了 js 文件中的一些代码行并用注释分隔。希望对您有所帮助。

var init = 120;
var listSlide = document.getElementById('list-slide');
listSlide.style.width = 120*8 + 'px';

// My code starts here

var sliderWidthTracker = -(120*6);

function slideFirst() {
  
  
  if (sliderWidthTracker < 0) {
    sliderWidthTracker = sliderWidthTracker+120;
    listSlide.style.transform = "translateX(" + sliderWidthTracker + "px)";
  }
}

// My code ends here

#list{
  width: 480px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}

.list-inner{
  height: 100%;
  transition: transform 0.25s ease;
}

.list-inner .item{
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 20px;
}

<div class="frame">
  <div id="list">
    
    <div id="list-slide" class="list-inner" style="transform: translateX(-720px)">
      <div class="item">Item 01</div>
      <div class="item">Item 02</div>
      <div class="item">Item 03</div>
      <div class="item">Item 04</div>
      <div class="item">Item 05</div>
      <div class="item">Item 06</div>
      <div class="item">Item 07</div>
      <div class="item">Item 08</div>
    </div>
    
  </div>
  
  <button onclick="slideFirst()">Click</button>
</div>