0
予想される動作：遷移のため次のボタンがヒットすると、各div.slideは左にスライドします。left 1000ルール。CSS3遷移が残っていない
実際の動作：全く遷移しません。
フィドル：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();
});
に役立つかもしれません。私は最初の.slide divを削除し、最後に移動します。私は3番目と4番目の.slide divsが目に見える遷移を持つことを期待しています。 – thatidiotguy
申し訳ありませんが実際に間違っていた、私はあなたのコードを正しく読んでいなかった。私はいくつかのCSSを編集しましたが、3番目と4番目の要素はコード内に同じ左プロパティを持っていました。ブロック/隠されているようです：https://jsfiddle.net/k26rhs67/2/ – Booboobeaker
遷移は今でも間違った側から起きている。 4番目のスライドの残りの値以外に何を変更しましたか？私はちょうど私のフィドルでそれを変更し、私は行動の変化に気付かない。 – thatidiotguy