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

Question

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

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

但是它很快就隐藏了 'leaving' 内容，我不知道要修改什么属性来解决这个问题。

我也尝试过使用

将其更改为淡入淡出过渡

.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 使用 translate3ds 更改项目在 space 中的位置。您不需要这些转换，因此请重置它们。利用 Less，代码如下所示：
```
.carousel-inner > .item {
  transform: translate3d(0,0,0) !important;
}
```
CSS 转换是通过使用 jQuery 添加和删除 CSS class 来触发的。这些 class 更改之间的时间已硬编码在轮播插件代码中 (Carousel.TRANSITION_DURATION = 600)。因此，在 600 毫秒后，一项变为活动状态（具有 .active class）。如果您的 css transition-duration 大于 0.6 秒，这就是意外行为的原因。

CSSclass变化如下：

活动项目有 class .active -> .active.left -> none 下一项没有class -> .next.left -> .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;
}

Answer 2

我一直在努力解决这个问题，这让我发疯了 - 在 Bootstrap 的介绍页面上，如果您查看“组件”，它会将 Carousel 列为需要 JS 的组件之一。我必须在所有其他样式表之前添加他们的 CSS 样式表，然后在结束 body 标记之前添加他们的 Bootstrap / JS 插件包。终于解决了这个问题。我在下面按顺序链接了它们，从介绍页面开始。

https://getbootstrap.com/docs/5.1/getting-started/introduction/

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

Bootstrap carousel refuses to transition smoothly after css adjustments

javascript

css

twitter-bootstrap