Question

我正在创建一个幻灯片，其中当您在幻灯片之间单击时，第一项会变大。这很好。但是，当您单击幻灯片浏览时，我无法向左侧添加平滑的过渡效果。我究竟做错了什么？我尝试使用jquery动画以及CSS过渡。什么都没发生。

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概念/动画都被破坏了。

您只需要

评论ul元素的CSS动画
将动画持续时间从100ms增加到例如2s

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

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

PS：当心您的注释，与上一个/下一个按钮上应用的专用代码相比，它们的含义是相反的

过渡幻灯片向左

1 个答案: