动态加速后，从相同的点恢复css动画

Question

在用户滚动中，我通过添加一个加速类来提高下面滑块的速度1秒。这可以很好地工作。我很难让它从加速类离开的同一点上滑动。

请给我建议。

​

var photos = document.querySelector(".photos");
photos.innerHTML += photos.innerHTML;

photos.onwheel = function () {
    photos.classList.add("speedup");
    var t = setTimeout(() => {
        photos.classList.remove("speedup");
        clearTimeout(t);
    }, 1000);
};

html,
body {
    overflow: hidden;
}
.wrapper {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #fff;
}
.wrapper .photos {
    display: flex;
    height: 100vh;
    align-items: center;
    animation: slide 50s linear 0s infinite;
}
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.wrapper .photos.speedup {
    animation-duration: 1s;
}

<div class="wrapper">
    <div class="photos">
        <img src="https://via.placeholder.com/500/FF0000" />
        <img src="https://via.placeholder.com/500/00FF00" />
        <img src="https://via.placeholder.com/500/0000FF" />
    </div>
</div>

​

Answer 1

我认为你必须使用JS构建动画，才能实现你想要的效果。下面是一个基本的例子：

​

var factor = 0.1; /* this will control the speed */
var current = 0;

var photos = document.querySelector(".photos");
photos.innerHTML += photos.innerHTML;

photos.onwheel = function() {
  factor = 0.2;
  var t = setTimeout(() => {
    factor = 0.1;
    clearTimeout(t);
  }, 1000);
};


function repeatOften() {
  current+=factor;
  if(current >=50) {
    current = 0;
  }
  photos.style.transform="translateX(-"+current+"%)";
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

html,
body {
  overflow: hidden;
}

.wrapper {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
}

.wrapper .photos {
  display: flex;
  height: 100vh;
  align-items: center;
  transform: translateX(0);
}

<div class="wrapper">
  <div class="photos">
    <img src="https://via.placeholder.com/500/FF0000" />
    <img src="https://via.placeholder.com/500/00FF00" />
    <img src="https://via.placeholder.com/500/0000FF" />
  </div>
</div>

​