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);

标签： javascriptcss

Answer 1

我已经改变了过渡属性，它也更快更流畅。

transition: all .8s ease 0s;

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: all .8s ease 0s;
}

.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>