twitter-bootstrap Bootstrap 轮播在 css 调整后拒绝平滑过渡

Bootstrap carousel refuses to transition smoothly after css adjustments

提问by Valyrion

For the last 3 hours I've been trying to make a simple adjustment to Bootstrap 3's carousel transitions. I've tried changing the slide speed where this is the only thing that seems to have any effect:

在过去的 3 个小时里，我一直在尝试对 Bootstrap 3 的轮播过渡进行简单的调整。我试过改变滑动速度，这是唯一似乎有任何影响的东西：

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

but it hides the 'leaving' content too soon, and I have no clue what property to modify to fix that.

但它过早地隐藏了“离开”的内容，我不知道要修改什么属性来解决这个问题。

I've also tried changing it to a fade transition with

我还尝试将其更改为淡入淡出过渡

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

And just about every other snippet to do so that I've come across, but every single one always first removed the leaving content, showing a featureless background, before fading in the next. What am I missing? All I need is some plain CSS to override the existing transition details, but I don't know where to look any more.

和我遇到的几乎所有其他片段一样，但每个片段总是首先删除离开的内容，显示无特色的背景，然后再淡入下一个。我错过了什么？我所需要的只是一些简单的 CSS 来覆盖现有的过渡细节，但我不知道该往哪里看。

回答by Bass Jobsen

I think different aspects of bootstrap's carousel plugin give the effects you mention.

我认为 bootstrap 的轮播插件的不同方面提供了您提到的效果。

1. Active items have display: blockwhile not active items have display: none

   This can be solved by giving all items display: blockand then setting the positionto absolutewith top: 0and left: 0, resulting in the items overlapping. Setting opacity: 0;makes them invisible by default.

   Less:

   .carousel-inner > .item {
     opacity: 0;
     top: 0;
     left: 0;
     width: 100%;
     display: block;
     position: absolute;
   }
   

   One problem of the position: absoluteis that the container does not get a height. The preceding can be solved by setting the positionof the first item to relative(it is add the right position already). In Less code, it is as follows:

   .carousel-inner > .item {
     :first-of-type {
       position:relative;
     } 
   }
   

2. Bootstrap uses translate3ds to change the position of the item in the space. You won't need these transformations, so reset them. Leveraging Less, code shown below:

   .carousel-inner > .item {
     transform: translate3d(0,0,0) !important;
   }
   

3. The CSS transitions are triggered by adding and removing CSS classes with jQuery. The time between these class changes has been hardcoded in the carousel plugin code (Carousel.TRANSITION_DURATION = 600). So, after 600 ms, one item becomes active (having the .active class). That is the reason for the unexpected behavior if your css transition-durationis greater than 0.6 seconds.

1. 活动项目有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;
     } 
   }
   

2. Bootstrap 使用translate3ds 来改变项目在空间中的位置。你不需要这些转换，所以重置它们。利用Less，代码如下：

   .carousel-inner > .item {
     transform: translate3d(0,0,0) !important;
   }
   

3. CSS 转换是通过使用 jQuery 添加和删除 CSS 类来触发的。这些类更改之间的时间已硬编码在轮播插件代码 ( Carousel.TRANSITION_DURATION = 600) 中。因此，在 600 毫秒后，一项变为活动状态（具有 .active 类）。如果您的 csstransition-duration大于 0.6 秒，这就是出现意外行为的原因。

The CSS class changes are as follows:

CSS 类更改如下：

The active item has class .active-> .active.left-> none The next item has no class -> .next.left-> .active

活动项目有类.active-> .active.left-> 无下一个项目没有类 -> .next.left->.active

So the .active.leftand .next.leftare important (or .prev.rightand .active.rightwhen you slide backwards).

因此，.active.left和.next.left是重要的（或.prev.right和.active.right当你向后滑动）。

Because all images are already stacked, you can use the z-indexproperty to make an image in the stack visible, because we can change the opacityat the same time. You can use the following Less code to fade in the next slide:

因为所有的图像都已经被堆叠了，所以可以使用该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;
  }
}

To make sure that the controls are visible as well, use:

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

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

Putting all together, see the results in this demo, which uses the following Less code:

总而言之，在这个演示中查看结果，它使用以下 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;
}

The above code can be compiled with the Less autoprefixer pluginplugin into CSS with the following command:

上面的代码可以使用Less autoprefixer 插件插件编译成 CSS 使用以下命令：

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

which outputs:

输出：

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