Javascript 如何更改引导'；从幻灯片到淡入淡出的s旋转传送带过渡

我在更改AngularUi旋转木马转换的转换时遇到了一个小问题我想将旋转木马的标准滑动转换更改为

fadeIn

FadeOut

转换Plunker中提供的示例我已经注释掉了滑动转换的css

`carousel-inner > .item {
        display: none;
        position: relative;
        -webkit-transition: 0.6s ease-in-out left;
        -moz-transition: 0.6s ease-in-out left;
        -o-transition: 0.6s ease-in-out left;
        transition: 0.6s ease-in-out left;`
}

我试图通过将css动画更改为以下内容来稍微操纵css动画，以实现fadeIn

 @-webkit-keyframes carousel-inner {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes carousel-inner{
     0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}


.carousel-inner > .item {
    display: none;
    position: relative;
     -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

然而，它并没有按照我想要的方式工作。有没有人遇到过这个问题？或者有人能解决这个问题吗？

2018年更新

Bootstrap 4.1将包括

carousel fade

转换，此处解释：

引导3

我发现不透明度可以更好地实现淡入效果

.carousel .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

---

演示：

我也遇到了同样的问题，终于让它工作了。 angular ui的旋转木马等待转换事件结束（它使用转换模块解析承诺），然后将活动类应用于下一张幻灯片

播放转换时，“活动”和“下一张”幻灯片都有“下一张”类。因此，您需要确保在应用“left”类时转换已经开始，否则模块不知道转换已经结束，从而继续下一张幻灯片

这是将旋转木马从滑动变为淡入的css。我在旋转木马外部分区中添加了一个额外的类

淡入

.carousel.fading .carousel-inner > .item {
  /* Override the properties for the default sliding carousel */
  display: block;
  position: absolute;
  left: 0 !important;

  /* Hide slides by default */
  opacity: 0;

  /* Set transition to opactity */
  -moz-transition: .6s ease-in-out opacity;
  -webkit-transition: .6s ease-in-out opacity;
  -o-transition: .6s ease-in-out opacity;
  transition: .6s ease-in-out opacity;
}

/* Active slides are visible on transition end */
.carousel.fading .carousel-inner > .active,
/* Next slide is visible during transition */
.carousel.fading .carousel-inner > .next.left {
    opacity: 1;
}
.carousel.fading .carousel-inner > .next,
.carousel.fading .carousel-inner > .active.left {
    opacity: 0;
}

这是我正在使用的SCSS代码：

.carousel.fading {
  .carousel-inner {
    height: 360px;
    .item {
      display: block;
      position: absolute;
      left: 0 !important;
      opacity: 0;
      @include transition(.6s ease-in-out opacity);
      &.active, &.next.left {
        opacity: 1;
      }
      &.next, &.active.left {
        opacity: 0;
      }
    }
  }
}

---

我还必须将旋转木马内部div的高度设置为图像的高度，因为幻灯片现在处于绝对位置。

除了淡入或淡出过渡外，您是否希望保留从左到右或从右到左的幻灯片？@LloydBanks试图从左到右的幻灯片中选择淡入，淡出过渡在我的第一次尝试中，我使用了您在上面突出显示的属性，这可以在我的plunker示例中看到，但是它似乎不适用于这个angularUI旋转木马，我不是100%为什么？在bootstrap 3中，我发现这以某种方式阻止了进入上一张幻灯片。尽管如此，这还是奏效了：