Question

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

我想删除.item {display：none}，并添加visibility：hidden，然后保持工作。它适用于Firefox（transition-property：left），但不适用于Chrome（transition-property：transform; transform：translate3d ...） https://jsfiddle.net/zjmove/r8ejf5Lk/

＆＃13;

$('.item').addClass('next')
$('.item')[0].offsetWidth   // force reflow
$('.item').addClass('left')

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="c">
  <div class='item'>

  </div>
</div>

＆＃13;

Answer 1

这里有一些事情，第一个是第一个脚本行是否可以在DOM准备好之前运行$('.item').addClass('next')

第二个，第一个类没有时间完成它的转换，直到第二个类被添加，但是延迟可能会解决这个问题。

无论哪种方式，并且根据首先是否存在（可能因浏览器而异），您可以获得不同的结果。

以下示例显示了在不使用display: none时应该如何设置，如果可能的话应该避免使用

＆＃13;

$(window).load(function() {

  $('.item').addClass('left')
  
});

＆＃13;

.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);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="c">
  <div class='item'>

  </div>
</div>

＆＃13;

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

1 个答案: