如何将引导程序的轮播过渡从幻灯片更改为淡入淡出

How to change Bootstrap's carousel transition from slide to fade

本文关键字：幻灯片 淡出 淡入 引导程序      更新时间：2023-09-26

我在更改 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 动画以实现淡入淡出

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

但是，它也没有按照我想要的方式工作。有没有人遇到过这个问题？还是有人有解决问题的方法？

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

播放过渡时，"活动"和"下一张"幻灯片都有"下一个"类。因此，您需要确保在应用"left"类时过渡已经开始，否则模块不知道过渡已结束以继续下一张幻灯片。

这是将轮播从滑动更改为淡入淡出的 css。我在轮播外部div 中添加了一个额外的类fading。

.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 的高度设置为图像的高度，因为幻灯片现在的位置是绝对的。

更新 2018

Bootstrap 4.1 将包括此处说明的carousel-fade转换：引导 4.0.0 轮播淡入淡出过渡

引导 3

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

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

演示：http://bootply.com/91957

相关文章：