jquery - CSS3 过渡左不工作

Question

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

实际行为:根本没有转换。

fiddle :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

我想将其添加为评论，但由于我有 < 50 条反馈，我不能:(

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