在css调整后,Bootstrap轮播拒绝顺利过渡

Question

在过去的3个小时里,我一直试图对Bootstrap 3的旋转木马过渡进行简单的调整.我试过改变滑动速度,这是唯一似乎有效的东西:

.carousel-inner .item {
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}

但是它太快隐藏了"离开"内容,我不知道要修改哪些属性来解决这个问题.

我也尝试过将它改成淡入淡出过渡

.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来覆盖现有的转换细节,但我不知道在哪里看.

Answer 1

我认为bootstrap的carousel插件的不同方面给出了你提到的效果.

1. 活动项目具有display: block非活动项目display: none

   这可以通过给所有的项目来解决display: block,然后设置position要absolute与top: 0和left: 0,导致重叠的项目.设置opacity: 0;默认情况下使它们不可见.

   减:

   .carousel-inner > .item {
     opacity: 0;
     top: 0;
     left: 0;
     width: 100%;
     display: block;
     position: absolute;
   }
   

   一个问题position: absolute是容器没有得到height.前面的内容可以通过将position第一个项目设置为relative(它已经添加正确的位置)来解决.在Less代码中,它如下:

   .carousel-inner > .item {
     :first-of-type {
       position:relative;
     } 
   }
   

2. Bootstrap使用translate3ds来更改空间中项目的位置.您不需要这些转换,因此请重置它们.利用Less,代码如下所示:

   .carousel-inner > .item {
     transform: translate3d(0,0,0) !important;
   }
   

3. 通过使用jQuery添加和删除CSS类来触发CSS转换.这些类更改之间的时间已在carousel插件代码(Carousel.TRANSITION_DURATION = 600)中进行了硬编码.因此,在600毫秒后,一个项目变为活动状态(具有.active类).如果你的css transition-duration大于0.6秒,那就是意外行为的原因.

CSS类更改如下:

活动项有类.active- > .active.left- >无下一项没有类 - > .next.left- >.active

因此,.active.left和.next.left是重要的(或.prev.right和.active.right当你向后滑动).

由于所有图像都已堆叠,因此您可以使用该z-index属性使堆栈中的图像可见,因为我们可以同时更改图像opacity.您可以使用以下Less代码淡入下一张幻灯片:

.carousel-inner {
  > .next.left {
    transition: opacity 0.6s ease-in-out;
    opacity: 1;
    z-index:2;
  }
  > .active.left {
    z-index:1;
  }
}

要确保控件也可见,请使用:

.carousel-control {
  z-index:4;
}

总而言之,请参阅此演示中的结果,该演示使用以下Less代码:

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

使用以下命令可以使用Less autoprefixer插件插件将上述代码编译到CSS中:

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