在css调整后，Bootstrap轮播拒绝顺利过渡 [英] Bootstrap carousel refuses to transition smoothly after css adjustments
问题描述
在过去的3个小时里，我一直试图对Bootstrap 3的旋转木马过渡进行简单的调整。
我试过改变滑动速度，这是唯一似乎有效的东西：
For the last 3 hours I've been trying to make a simple adjustment to Bootstrap 3's carousel transitions. I've tried changing the slide speed where this is the only thing that seems to have any effect:
.carousel-inner .item {
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
但它过早隐藏'离开'内容，我不知道要修改哪些属性来修复它。
but it hides the 'leaving' content too soon, and I have no clue what property to modify to fix that.
我也尝试将其更改为淡入淡出过渡
I've also tried changing it to a fade transition with
.carousel-fade .item {
opacity: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
left: 0 !important;
}
.carousel-fade .active {
opacity: 1 !important;
}
.carousel-fade .left {
opacity: 0 !important;
-webkit-transition: opacity 0.5s ease-in-out !important;
-moz-transition: opacity 0.5s ease-in-out !important;
-ms-transition: opacity 0.5s ease-in-out !important;
-o-transition: opacity 0.5s ease-in-out !important;
transition: opacity 0.5s ease-in-out !important;
}
.carousel-fade .carousel-control {
opacity: 1 !important;
}
几乎所有其他代码片段都是我遇到过的，但每一个人总是首先删除离开的内容，显示一个无特色的背景，然后在下一个消失之前。我错过了什么？我只需要一些简单的CSS来覆盖现有的过渡细节，但我不知道在哪里看。
And just about every other snippet to do so that I've come across, but every single one always first removed the leaving content, showing a featureless background, before fading in the next. What am I missing? All I need is some plain CSS to override the existing transition details, but I don't know where to look any more.
推荐答案
我认为bootstrap的carousel插件的不同方面给出了你提到的效果。
I think different aspects of bootstrap's carousel plugin give the effects you mention.
-
活动项目有
显示：阻止而非活动项目显示：无
这可以通过以下方式解决：给所有项目显示：阻止然后将位置设置为绝对 top：0 和 left：0 ，导致项目重叠。设置不透明度：0; 默认情况下使它们不可见。
This can be solved by giving all items display: block and then setting the position to absolute with top: 0 and left: 0, resulting in the items overlapping. Setting opacity: 0; makes them invisible by default.
减：
.carousel-inner > .item {
opacity: 0;
top: 0;
left: 0;
width: 100%;
display: block;
position: absolute;
}
位置的一个问题：绝对是容器没有得到 height 。可以通过将第一项的位置设置为 relative 来解决上述问题（它已经添加了正确的位置） 。在Less代码中，它如下：
One problem of the position: absolute is that the container does not get a height. The preceding can be solved by setting the position of the first item to relative (it is add the right position already). In Less code, it is as follows:
.carousel-inner > .item {
:first-of-type {
position:relative;
}
}
Bootstrap使用 translate3d s更改空间中项目的位置。您不需要这些转换，因此请重置它们。利用更少，代码如下所示：
Bootstrap uses translate3ds to change the position of the item in the space. You won't need these transformations, so reset them. Leveraging Less, code shown below:
.carousel-inner > .item {
transform: translate3d(0,0,0) !important;
}
通过使用jQuery添加和删除CSS类来触发CSS转换。这些类更改之间的时间已在carousel插件代码中进行了硬编码（ Carousel.TRANSITION_DURATION = 600 ）。因此，在600毫秒后，一个项目变为活动状态（具有.active类）。如果你的css transition-duration 大于0.6秒，那就是意外行为的原因。
The CSS transitions are triggered by adding and removing CSS classes with jQuery. The time between these class changes has been hardcoded in the carousel plugin code (Carousel.TRANSITION_DURATION = 600). So, after 600 ms, one item becomes active (having the .active class). That is the reason for the unexpected behavior if your css transition-duration is greater than 0.6 seconds.
CSS类更改如下：
活动项具有类 .active - > .active.left - > none
下一项没有课 - > .next.left - > .active
The active item has class .active -> .active.left -> none
The next item has no class -> .next.left -> .active
所以 .active.left 和 .next.left 很重要（或 .prev.right 和 .active.right 当你向后滑动时）。
So the .active.left and .next.left are important (or .prev.right and .active.right when you slide backwards).
因为所有图像都已堆叠，你可以使用 z-index 属性使堆栈中的图像可见，因为我们可以同时更改不透明度。您可以使用以下Less代码淡入下一张幻灯片：
Because all images are already stacked, you can use the z-index property to make an image in the stack visible, because we can change the opacity at the same time. You can use the following Less code to fade in the next slide:
.carousel-inner {
> .next.left {
transition: opacity 0.6s ease-in-out;
opacity: 1;
z-index:2;
}
> .active.left {
z-index:1;
}
}
为了确保控件也可见，使用：
To make sure that the controls are visible as well, use:
.carousel-control {
z-index:4;
}
全部放在一起，看此演示，它使用以下少量代码：
Putting all together, see the results in this demo, which uses the following Less code:
.carousel-inner {
> .item {
opacity: 0;
top: 0;
left: 0;
width: 100%;
display: block;
position: absolute;
z-index:0;
transition: none;
transform: translate3d(0,0,0) !important;
&:first-of-type {
position:relative;
}
}
> .active {
opacity: 1;
z-index:3;
}
> .next.left,
> .prev.right {
transition: opacity 0.6s ease-in-out;
opacity: 1;
left: 0;
z-index:2;
}
> .active.left,
> .active.right {
z-index:1;
}
}
.carousel-control {
z-index:4;
}
上面的代码可以使用较少的autoprefixer插件插件插入CSS：
The above code can be compiled with the Less autoprefixer plugin plugin into CSS with the following command:
lessc --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6' code.less
输出：
.carousel-inner > .item {
opacity: 0;
top: 0;
left: 0;
width: 100%;
display: block;
position: absolute;
z-index: 0;
-webkit-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.carousel-inner > .item:first-of-type {
position: relative;
}
.carousel-inner > .active {
opacity: 1;
z-index: 3;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
-webkit-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
opacity: 1;
left: 0;
z-index: 2;
}
.carousel-inner > .active.left,
.carousel-inner > .active.right {
z-index: 1;
}
.carousel-control {
z-index: 4;
}
这篇关于在css调整后，Bootstrap轮播拒绝顺利过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
