CSS Bootstrap 4.0.0 轮播淡入淡出过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48665392/
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
Bootstrap 4.0.0 Carousel fade transition
提问by astralmaster
There are several questions asked on Stackoverflow regarding Carousel fade transition but none of them seem to work on a default 4.0.0 implementation:
在 Stackoverflow 上有几个关于 Carousel 淡入淡出过渡的问题，但似乎没有一个适用于默认的 4.0.0 实现：
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Did bootstrap change the way of transitioning carousel-item-s since Alpha.6 version? How would one go about implementing the fade transition instead of slide in 4.0.0 ?
carousel-item自 Alpha.6 版本以来，bootstrap 是否改变了-s的转换方式？如何在 4.0.0 中实现淡入淡出过渡而不是幻灯片？
回答by Zim
I reopened this because the question was changed from 4 Beta to 4.0.0 (stable)...
我重新打开这个是因为问题从 4 Beta 更改为 4.0.0 (stable) ...
Bootstrap 4.0.0 Carousel Fade:
https://www.codeply.com/go/LhLJlldsLN
Bootstrap 4.0.0 轮播淡出：https:
//www.codeply.com/go/LhLJlldsLN
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
The fade effect was removed from the carousel during the 4.0 Beta and is also not available in 4.0.0. This pull requestindicates that the fade effect will return in 4.1 or 4.2. In the meanwhile, the above CSS will work for 4.0.0
淡入淡出效果在 4.0 Beta 期间从轮播中移除，并且在 4.0.0 中也不可用。此拉取请求表示淡入淡出效果将在 4.1 或 4.2 中返回。同时，上述 CSS 将适用于 4.0.0
回答by ronaldtgi
In bootstrap 4, you can add "carousel-fade"class like this.
在引导程序 4 中，您可以像这样添加“carousel-fade”类。
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
....
</div>
回答by Chris Go
Should be fixed in Bootstrap 4.1.
应该在 Bootstrap 4.1 中修复。
