为什么不显示:无，CSS3过渡不起作用

Question

代码来自Bootstrap Carousel，我想知道为什么没有显示：无，CSS3过渡不起作用？它应该从右向左移动。谢谢！https://jsfiddle.net/25d3ga9j/11/

我想删除.item {display：none}，并添加可见度：隐藏，然后保持其工作。它在firefox(过渡 - 特质：左(中起作用，但在chrome(过渡 - 托管：变换;转换：transfort：transfore3d ...(中起作用。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

这里发生了一些事情，第一个是第一个脚本行是否在DOM准备就绪之前可能运行$('.item').addClass('next')

第二堂课没有时间可以完成其过渡直到添加第二堂课，但是延迟可能会解决。

无论哪种方式

以下示例显示不使用display: none时应如何设置它，顺便说一下，如果可能的话，应避免

$(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>