如何将 Bootstrap 的轮播过渡从幻灯片更改为淡入淡出 [英] How to change Bootstrap's carousel transition from slide to fade

问题描述

我在更改 AngularUi 的过渡时遇到了一个小问题 单击此处 轮播过渡我想要将轮播的标准滑动过渡更改为 fadeIn FadeOut 过渡 单击此处 Plunker 中提供的示例我已注释掉滑动过渡的 css

I am having a slight issue changing the transition of the AngularUi click here carousel transition I want to change the carousel's standard sliding transition to a fadeIn FadeOut transition Click here the example presented in Plunker i have commented out the css for the sliding transition

`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 动画以实现淡入

I have attempted to manipulate the css animations slightly by changing it to the following to achieve a 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;
}

但是它也没有像我想要的那样工作.有没有人遇到过这个问题?或者有人有解决问题的方法吗?

However it's not working the way I want it too. Has anyone experienced this problem? Or does anyone have a solution to the problem?

推荐答案

我也遇到了同样的问题，但最终解决了.angular-ui 的 carousel 等待转换事件结束(它使用转换模块来解析承诺)，然后将活动类应用到下一张幻灯片.

I had the same problem and finally got it working. The carousel from angular-ui waits for a transition event to be ended (it uses the transition module which resolves a promise), and then applies the active class to the next slide.

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

While the transition is playing, both the 'active' and the 'next' slide have the 'next' class. So you need to make sure that the transition already starts when the 'left' classes are applied, otherwise the module doesn't know that the transition is ended to move on to the next slide.

这是将轮播从滑动变为淡入淡出的css.我向轮播外层 div 添加了一个额外的类 fading.

This is the css that changes the carousel from sliding to fading. I added an extra class fading to the carousel outer div.

.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 代码:

This is the SCSS code I am using:

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

我还必须将 carousel-inner div 的高度设置为我的图像的高度，因为幻灯片现在是绝对定位的.

I also had to set height of the carousel-inner div to the height of my images, because the slides are positioned absolute now.

这篇关于如何将 Bootstrap 的轮播过渡从幻灯片更改为淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！