为什么没有显示：无，css3 转换不起作用？

Question

代码来自 Bootstrap 轮播，我想知道为什么没有 display:none，css3 转换不起作用？它应该从右向左移动。 谢谢！ https://jsfiddle.net/25d3ga9j/11/

我想删除 .item{display:none}，并添加可见性：隐藏，然后让它继续工作。它适用于 Firefox（transition-property：left），但不适用于 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

这里发生了一些事情，首先是第一个脚本行是否可能在 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>