why without display:none, css3 transition not working? - css

Question

The code is from Bootstrap carousel, I wonder why without display:none, css3 transition not working? It should move from right to left.
Thanks! https://jsfiddle.net/25d3ga9j/11/
I want to remove .item{display:none}, and add visibility: hidden, then keep it working. It works in Firefox(transition-property: left),but not in Chrome(transition-property: transform;transform: translate3d...)
https://jsfiddle.net/zjmove/r8ejf5Lk/
$('.item').addClass('next')
$('.item')[0].offsetWidth // force reflow
$('.item').addClass('left')
.item {
height: 100px;
background: red;
display: none; //why with out display:none, transition not working?
}
.c {
overflow: hidden;
}
.item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
}
.item.next {
display: block;
transform: translate3d(100%, 0, 0);
left: 0;
}
.item.next.left {
transform: translate3d(0, 0, 0);
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="c">
<div class='item'>
</div>
</div>

Answer 1

There is a few things going on here, where the first is whether the first script line might run before the DOM is ready $('.item').addClass('next')
The second, there is no time for the first class to finish its transition until the second gets added, but a delay might solve that.
Either way, and based on whether which comes first (may vary between browsers), you can get different result.
The below sample shows how it should be set up when not using display: none, which by the way should be avoid if possible
$(window).load(function() {
$('.item').addClass('left')
});
.c {
overflow: hidden;
}
.item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000px;
transform: translate3d(100%, 0, 0);
height: 100px;
background: red;
}
.item.left {
transform: translate3d(0, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c">
<div class='item'>
</div>
</div>