javascript - 如何使用淡入淡出效果为某些像素设置动画？

Question

我使用这个插件创建了一个具有渐变效果的滑块 https://github.com/crystal-lang/crystal-presents

我的逻辑是

1. 我把我的幻灯片放在不同的左边0, 25%, 50% ,75%（如果有四张幻灯片）。
2. 现在我将这些侧移到0px用户使用 next button 导航时。将转换 translateX(0) 与0 Sec. 并在 5 秒内将不透明度从 0 增加到 1。

我的问题。

3. 褪色很好。

4. 但我想right to left or left to right根据用户选择的选项翻译几个像素。

5. 也就是说目前滑动移动1000px (his position) to 0px (expecting position) in zero sec。我希望它应该移动100px to 0px（小距离），3 second以便它看起来滑动也在滑动（小像素）。

可能吗 ？？

这是我的代码 https://codesandbox.io/s/nostalgic-smoke-f5y51?file=/slider.js

prevSlide() {
    const t = this;
    const opts = t.options;
    let nextSlide = t.activeSlide - 1;

    if (t.activeSlide <= 1 && !t.isEnabledOption("loop")) {
      return;
    }

    if (nextSlide < 1) {
      nextSlide = t.slidesLength;
    }

    if (isFunction(opts.beforeChange)) {
      opts.beforeChange.call(t, t, t.activeSlide, nextSlide, t.slidesLength);
    }

    t.activeSlide <= 1 && t.isEnabledOption("loop")
      ? (t.activeSlide = t.slidesLength)
      : (t.activeSlide -= 1);
    t._setActiveSlide();
  }

  nextSlide() {
    const t = this;
    const opts = t.options;
    let nextSlide = t.activeSlide + 1;

    if (t.activeSlide >= t.slidesLength && !t.isEnabledOption("loop")) {
      t._paused = true;

      return;
    }

    if (nextSlide > t.slidesLength) {
      nextSlide = 1;
    }

    if (isFunction(opts.beforeChange)) {
      opts.beforeChange.call(t, t, t.activeSlide, nextSlide, t.slidesLength);
    }

    t.activeSlide >= t.slidesLength && t.isEnabledOption("loop")
      ? (t.activeSlide = 1)
      : (t.activeSlide += 1);
    t._setActiveSlide();
  }

标签： javascripthtmljquerycsscarousel