向左滑行

Question

我正在创建一个幻灯片，当您在幻灯片之间单击时，第一个项目会变得更大。这个很好用。但是，当您单击幻灯片时，我无法向左边添加一个很好的平稳过渡。我做错了什么？我尝试使用jquery动画和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概念/动画都被毁了。

你只需要

为您的element

• Increase

1. 注释CSS动画您的动画持续时间从100 2s到2 s，例如

请记住，您不应该将CSS动画和JQUERY动画混合在相同的属性上，除非您真正知道自己在做什么。

对于我来说，这2次更新的https://jsfiddle.net/piiantom/a79b2gn4/11/

PS:注意您的注释，与Prev / Next按钮上应用的专用代码相比，这些注释是相反的。