twitter-bootstrap 如何将 Bootstrap 的轮播过渡从幻灯片更改为淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19792000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change Bootstrap's carousel transition from slide to fade
提问by NewKidOnTheBlock
I am having a slight issue changing the transition of the AngularUi click herecarousel transition I want to change the carousel's standard sliding transition to a fadeInFadeOuttransition Click herethe example presented in Plunker i have commented out the css for the sliding transition
我在更改 AngularUi 的过渡时遇到了一个小问题单击此处轮播过渡 我想将轮播的标准滑动过渡更改为fadeInFadeOut过渡单击此处显示在 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;`
}
I have attempted to manipulate the css animations slightly by changing it to the following to achieve a fadeIn
我试图通过将其更改为以下内容来稍微操纵 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;
}
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?
然而，它也没有按照我想要的方式工作。有没有人遇到过这个问题？或者有人有解决问题的方法吗？
回答by Frank van Wijk
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.
我遇到了同样的问题，终于让它工作了。来自 angular-ui 的轮播等待转换事件结束（它使用转换模块来解析承诺），然后将活动类应用到下一张幻灯片。
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 fadingto the carousel outer div.
这是将轮播从滑动变为淡入淡出的css。我向fading轮播外层 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:
这是我正在使用的 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;
}
}
}
}
I also had to set height of the carousel-inner div to the height of my images, because the slides are positioned absolute now.
我还必须将 carousel-inner div 的高度设置为我的图像的高度，因为幻灯片现在是绝对定位的。
回答by Zim
Update 2018
2018 年更新
Bootstrap 4.1will include a carousel-fadetransition explained here:
Bootstrap 4.0.0 Carousel fade transition
Bootstrap 4.1将包括carousel-fade这里解释的过渡：
Bootstrap 4.0.0 Carousel Fade transition
Bootstrap 3
引导程序 3
I have found opacity to work better for a fade effect..
我发现不透明度更适合淡化效果..
.carousel .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
Demo: http://bootply.com/91957
