CSS3 左转不工作

Question

预期行为：由于转换：left 1000 规则，当按下下一个按钮时，每个 div.slide 都会向左滑动。

实际行为：根本没有过渡。

小提琴：https://jsfiddle.net/k26rhs67/

HTML：

<div id="clientContainer">
  <div id="container">
    <div id="body">
      <div class="slide">
        <span class="slide_num">1</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">2</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">3</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">4</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">5</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">6</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">7</span>
        <button class="next">Next</button>
      </div>
    </div>
  </div>
</div>

CSS：

#body {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    display: table;
    table-layout: fixed;
    min-height: 250px;
    overflow: hidden;
}

#clientContainer {
    width: 300px;
    display: table-cell;
}

#container {
  position: relative;
  width: 100%;
  max-width: 520px;
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
  font-weight: normal;
}

.slide {
  padding: 12px;
  height: 200px;

  position: relative;
  float: left;
      display: block;
  top: 0;
  width: 100%;
  padding: 16px;
  background: #fff;
  box-shadow: 0 0 4px #aaa;
  box-sizing: border-box;
  min-height: 250px;
  visibility: hidden;
  display: none;
  margin-left: -116%;
  left: 348%;
  transition: left 1000ms;
}

.slide:nth-child(1) {
  left: -116%;
}

.slide:nth-child(2) {
    left: 0%;
    visibility: visible;
}

.slide:nth-child(3) {
    left: 116%;
    display: block;
    visibility: visible;
}

.slide:nth-child(4) {
    left: 116%;
    visibility: visible;
}

.slide_num {
  display: block;
  width: 30px;
  margin: 0 auto 0 auto;
}

.next {
  display:block;
  margin: 0 auto 0 auto;
  width: 60px;
}

JS：

function promiseTransitionEnd($element) {
  var deferred = $.Deferred();
  var duration = parseFloat($element.css("transitionDuration")) || 0;
  if (duration == 0) {
    deferred.resolve();
  } else {
    $element.on("transitionend.promiseTransitionEnd", function (e) {
      if (e.target == this) {
        $(this).off("transitionend.promiseTransitionEnd");
        deferred.resolve($element);
      }
    });
  }
  return deferred;
}

var $container = $("#container");
var $body = $container.find("#body");

var carousel = {
  $container: $body,
  current: function () {
    return $body.find(".slide").eq(2);
  },
  next: function () {
    var $slides = $body.find(".slide");
    $slides.first().insertAfter($slides.last());
    return promiseTransitionEnd($slides.eq(2))
      .then(function () {
        return carousel.current();
      });
  }
};

$(".next").click(function() {
    carousel.next();
});

Answer 1

我会将此添加为评论，但由于我有

我认为问题在于您基本上是从 DOM 中分离项目并将其作为新元素重新插入，因此不会发生转换。

Answer 2

这可能对你有帮助

$(function() {
  $('.slide .next').on('click', function(e) {
    e.preventDefault();
    $('.slide.activeSlide').removeClass('activeSlide');

    $(this).parent().next().length ? $(this).parent().next().addClass('activeSlide') : $(this).parent().siblings(":eq(0)").addClass('activeSlide');

  });
})

#body {
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
  display: table;
  table-layout: fixed;
  min-height: 250px;
  overflow: hidden;
}
#clientContainer {
  width: 300px;
  display: table-cell;
}
#container {
  position: relative;
  width: 100%;
  max-width: 520px;
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
  font-weight: normal;
}
.slide {
  padding: 12px;
  height: 200px;
  display: none;
  position: relative;
  float: left;
  display: none;
  top: 0;
  width: 100%;
  padding: 16px;
  background: #fff;
  box-shadow: 0 0 4px #aaa;
  box-sizing: border-box;
  min-height: 250px;
}
@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  50% {
    transform: translateX(-8%);
  }
  65% {
    transform: translateX(4%);
  }
  80% {
    transform: translateX(-4%);
  }
  95% {
    transform: translateX(2%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  50% {
    -webkit-transform: translateX(-8%);
  }
  65% {
    -webkit-transform: translateX(4%);
  }
  80% {
    -webkit-transform: translateX(-4%);
  }
  95% {
    -webkit-transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
.slide_num {
  display: block;
  width: 30px;
  margin: 0 auto 0 auto;
}
.next {
  display: block;
  margin: 0 auto 0 auto;
  width: 60px;
}
.activeSlide {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clientContainer">
  <div id="container">
    <div id="body">
      <div class="slide activeSlide">
        <span class="slide_num">1</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">2</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">3</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">4</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">5</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">6</span>
        <button class="next">Next</button>
      </div>
      <div class="slide">
        <span class="slide_num">7</span>
        <button class="next">Next</button>
      </div>
    </div>
  </div>
</div>