向左过渡幻灯片

Question

我正在创建一个幻灯片，当您在幻灯片之间单击时，第一个项目会变大。这工作正常。但是，当您单击幻灯片时，我无法向左侧添加漂亮的平滑过渡。我究竟做错了什么？我尝试使用 jquery animate 和 css 转换。什么都没有发生。

https://codepen.io/camwes89/pen/mdJQLra

var slider = $(".grow-carousel"),
  item_width = slider.parent().outerWidth();

// Adjust the slider when/if the window gets resized
$(window).on("resize", adjust);
adjust();

if (slider.children("li").length > 1) {
  // Add previous/next buttons
  slider
    .parent()
    .append(
      '<a href="#" id="btn-prev"><i class="fa fa-angle-left"></i><span>Previous</span></a><a href="#" id="btn-next"><i class="fa fa-angle-right"></i><span>Next</span></a>'
    );

  // Handle clicks on the next button
  slider.parent().on("click", "a#btn-prev", function(e) {
    e.preventDefault();
    $(".grow-carousel li").removeClass("active");
    slider.children("li:last").prependTo(slider);
    slider.css("left", -item_width);
    slider.animate({
        left: 0
      },
      300,
      "swing"
    );

    slider.find("li").first().addClass("active");
  });

  // Handle clicks on the previous button
  slider.parent().on("click", "a#btn-next", function(e) {
    e.preventDefault();
    $(".grow-carousel li").removeClass("active");
    slider.animate({
        left: -item_width
      },
      300,
      "swing",
      function() {
        slider.children("li:first").appendTo(slider);
        slider.css("left", 0);
        slider.find("li").first().addClass("active");
      }
    );
  });
}

// Helpers
function adjust() {
  item_width = slider.parent().outerWidth();
  slider
    .children("li")
    .width(item_width)
    .parent()
    .width(item_width * slider.children("li").length);
}

.container {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400x;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  transition: all 3s ease;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  transition: all 0.3s ease-in;
  li {
    position: relative;
    font-size: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    margin: 10px;
    padding: 20px;
    background: #333;
    height: 260px;
    width: 160px !important;
    transition: all 0.3s ease-in;
    transition-delay: 250ms;
    overflow: hidden;
    display: inline;
    float: left;
    img {
      height: 100%;
      width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.active {
      height: 300px;
    }
  }
}

#btn-next {
  position: relative;
  top: -29px;
  margin-left: 101px;
  background: #ccc;
  padding: 2px 3px;
}

#btn-prev {
  position: relative;
  top: -29px;
  margin-left: 10px;
  background: #ccc;
  padding: 2px 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul class="grow-carousel">
    <li>
      <div>
        <img src="https://images.unsplash.com/photo-1585194329143-ad92c5b1ede0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      </div>
    </li>
    <li>
      <div>
        <img src="https://images.unsplash.com/photo-1585001994793-7a4b117bcdcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
      </div>
    </li>
    <li>
      <div><img src="https://images.unsplash.com/photo-1585225465920-594394872d48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" /></div>
    </li>
  </ul>
</div>

Answer 1

据我了解，单击“上一个”或“下一个”按钮时会出现“无法正常工作”的动画。渲染效果是动画中的跳跃……对吧？

你的主要问题是 CSS 动画和 JQUERY 动画之间的冲突

您似乎想通过 JS（使用 jQuery）来统治一切，因为您需要在动画之前或之后移动幻灯片的最后一张或第一张图片。动画使用的属性是left，是动画或者简单设置。

到目前为止，一切都很好......但是，你有副作用，因为这个 left 属性也使用 CSS 动画（3 秒持续时间）。每次你用 JS 触摸left 属性时，它会持续 3 秒，所以你所有的 JS 概念/动画都毁了。

你只需要

1. 评论 ul 元素的 CSS 动画
2. 例如将动画持续时间从 100 毫秒增加到 2 秒

请记住，除非您真的知道自己在做什么，否则不应在同一属性上混合使用 CSS 动画和 JQUERY 动画

这两个更新对我有用 https://jsfiddle.net/piiantom/a79b2gn4/11/

PS：注意你的 cmets 与 Prev / Next 按钮上应用的专用代码相比是相反的