Question

在过去的3个小时里，我一直试图对Bootstrap 3的旋转木马过渡进行简单的调整。我试过改变滑动速度，这是唯一似乎有效的东西：

.carousel-inner .item {
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

但它过早地隐藏了“离开”内容，我不知道要修改哪些属性来修复它。

我也尝试用

将其更改为淡入淡出过渡

.carousel-fade .item {
  opacity: 0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  left: 0 !important;
}

.carousel-fade .active {
  opacity: 1 !important;
}

.carousel-fade .left {
  opacity: 0 !important;
  -webkit-transition: opacity 0.5s ease-in-out !important;
  -moz-transition: opacity 0.5s ease-in-out !important;
  -ms-transition: opacity 0.5s ease-in-out !important;
  -o-transition: opacity 0.5s ease-in-out !important;
  transition: opacity 0.5s ease-in-out !important;
}

.carousel-fade .carousel-control {
  opacity: 1 !important;
}

几乎所有其他代码片段都是我遇到过的，但每个人都会先删除留下的内容，显示无特色的背景，然后再褪色。我错过了什么？我只需要一些简单的CSS来覆盖现有的转换细节，但我不知道在哪里看。

Answer 1

我认为bootstrap的旋转木马插件的不同方面会给你提到的效果。

有效项目有display: block，而有效项目有display: none

这可以通过提供所有项display: block，然后将position设置为absolute top: 0和left: 0来解决，从而导致项目重叠。设置opacity: 0;会使它们默认不可见。

减：
```
.carousel-inner > .item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
}
```
position: absolute的一个问题是容器没有获得height。可以通过将第一个项目的position设置为relative来解决上述问题（它已经添加了正确的位置）。在Less代码中，它如下：
```
.carousel-inner > .item {
  :first-of-type {
    position:relative;
  } 
}
```
Bootstrap使用translate3d来更改空间中项目的位置。你不会需要这些转换，所以重置它们。利用Less，代码如下所示：
```
.carousel-inner > .item {
  transform: translate3d(0,0,0) !important;
}
```
通过使用jQuery添加和删除CSS类来触发CSS转换。这些类更改之间的时间已在carousel插件代码（Carousel.TRANSITION_DURATION = 600）中进行了硬编码。因此，在600毫秒后，一个项目变为活动状态（具有.active类）。如果你的css transition-duration大于0.6秒，那就是意外行为的原因。

CSS类更改如下：

活动项目包含课程.active - ＆gt; .active.left - ＆gt;没有下一个项目没有课程 - ＆gt; .next.left - ＆gt; .active

因此.active.left和.next.left很重要（或向后滑动时.prev.right和.active.right。

由于所有图像都已堆叠，因此您可以使用z-index属性使堆栈中的图像可见，因为我们可以同时更改opacity。您可以使用以下Less代码淡入下一张幻灯片：

.carousel-inner {
  > .next.left {
    transition: opacity 0.6s ease-in-out;
    opacity: 1;
    z-index:2;
  }
  > .active.left {
    z-index:1;
  }
}

要确保控件也可见，请使用：

.carousel-control {
  z-index:4;
}

全部放在一起，查看this demo中的结果，该结果使用以下Less代码：

.carousel-inner {
 > .item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
  z-index:0;
  transition: none;
  transform: translate3d(0,0,0) !important;
  &:first-of-type {
    position:relative;
  } 
  }
 > .active {
  opacity: 1;
  z-index:3;
}

 > .next.left,
 > .prev.right {
  transition: opacity 0.6s ease-in-out;
  opacity: 1;
  left: 0;
  z-index:2;
  }                                                                                                             
 > .active.left,
 > .active.right {
  z-index:1;
  }
}
.carousel-control {
z-index:4;
}

使用以下命令可以使用Less autoprefixer plugin插件将上述代码编译到CSS中：

lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' code.less

输出：

.carousel-inner > .item {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  position: absolute;
  z-index: 0;
  -webkit-transition: none;
       -o-transition: none;
          transition: none;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}
.carousel-inner > .item:first-of-type {
  position: relative;
}
.carousel-inner > .active {
  opacity: 1;
  z-index: 3;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  -webkit-transition: opacity 0.6s ease-in-out;
       -o-transition: opacity 0.6s ease-in-out;
          transition: opacity 0.6s ease-in-out;
  opacity: 1;
  left: 0;
  z-index: 2;
}
.carousel-inner > .active.left,
.carousel-inner > .active.right {
  z-index: 1;
}
.carousel-control {
  z-index: 4;
}

在css调整后，Bootstrap轮播拒绝顺利过渡

1 个答案: