如何更改Bootstrap的轮播从幻灯片到渐变的过渡 [英] How to change Bootstrap's carousel transition from slide to fade

问题描述

我有一个小问题，改变了AngularUi的转换点击这里轮播转换I想要将旋转木马的标准滑动转换更改为 fadeIn FadeOut transition






















$ b pre> `carousel-inner> .item {
display：none;
position：relative;
-webkit-transition：0.6s缓入;
-moz-transition：0.6s ease-in-out left;
-o-transition：0.6s自由向左;
transition：0.6s ease-in-out left;`
}


我试图通过改变它到下面的操作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; 
} 
  

但是它的工作方式不如我想要的那样。有没有人经历过这个问题？或者有人有问题的解决方案吗？

解决方案

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

当转换正在播放时，活动和下一个幻灯片都有下一个类。因此，您需要确保在应用左类时转换已经开始，否则模块不知道转换结束以移动到下一张幻灯片。

这是改变旋转木马从滑动到衰落的css。我向旋转木马外部div添加了一个额外的类 fading 。

 。 carousel.fading.carousel-inner> .item {
 / *覆盖默认滑动轮播的属性* / 
 display：block; 
 position：absolute; 
 left：0！important; 
 
 / *默认隐藏幻灯片* / 
 opacity：0; 
 
 / *设置到opactity的转换* / 
 -moz-transition：.6s ease-in-out不透明度; 
 -webkit-transition：.6s轻松进出不透明度; 
 -o-transition：.6s缓入不透明度; 
 transition：.6s easy-in-out不透明度; 
} 
 
 / *活动幻灯片在转换结束时可见* / 
 .carousel.fading .carousel-inner> .active，
 / *下一张幻灯片在转换期间可见* / 
 .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; 
} 
} 
} 
} 
  

也不得不设置carousel-inner div的高度为我的图片的高度，因为幻灯片现在是绝对的。

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

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?

解决方案

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.

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

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

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屋！