CSS3 Переход слева Не работает

Question

Ожидаемое поведение: Каждый div.slide будет скользить влево, когда следующая кнопка будет удалена из-за перехода: left 1000 правило.

Фактическое поведение: переход отсутствует.

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 и вставляете его в новый элемент, поэтому переход никогда не происходит.

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>