Question

这是关于@StrangeElement对这个旧问题的答案的后续问题：Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

我尝试了@ StrangeElement的mod到bootstrap.css，我几乎让它工作了。问题是，当活动图像淡出时，它会淡化为白色，然后下一个图像将弹出而没有淡入淡出的动画。我可能会在这里失踪什么？

这是我正在使用的例子：

http://planetofsoundonline.com/beta/index.php

任何类型的指针都会受到极大的赞赏。谢谢！

Answer 1

拿一个look at this fiddle。不幸的是，它不适用于任何当前可用的Internet Explorer版本。

您的轮播div只需添加额外的课程carousel-fade即可使用。

[source]

此转换显示下一张图像，然后将新图像淡出其上。如果你想直接淡出动画淡出，请将这些行添加到css。

.carousel.carousel-fade .item {
  opacity:0;
}

.carousel.carousel-fade .active.item {
    opacity:1;
}

Answer 2

添加如何：

 filter: alpha(opacity=100); /* ie fix */

导致：

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

Answer 3

我成功地将旋转木马改为褪色图像而不是滑动它们。我还通过CSS缩放图像，以便他们响应：

img.carousel-img {
  max-width:1900px;
  width:100%;
}

不幸的是，在Webkit浏览器上，当淡入淡出动画处于活动状态时，每个图像都会缩放到原始大小。并且在每个动画完成之后立即再次按照上面的CSS规则缩放图像（立即，不动画）。当然动画看起来很业余＆amp;以这种方式口吃。所以我添加了

-webkit-transform: translate3d(0,0,0);

到旋转木马的褪色过渡规则，从那时起动画就像一个魅力。因此规则如下：

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transform: translate3d(0,0,0);  /* WEBKIT-FIX FOR FADING SCALED IMAGES CORRECTLY VIA CSS-TRANSITIONS */
}

我在这里找到了这个解决方案：Why does applying '-webkit-backface-visibility: hidden;' fix issues with negative margin transition on on ios / ipad 5.1?

Answer 4

希望能帮助下一个人。我想要缩放和淡化。

真的不需要添加额外的类。 Bootstrap 3.3.6

渐变和缩放（考虑左/右箭头）

/* Carousel Scale and Fade */

/* Carousel Fade */
.carousel .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.carousel .next, .carousel .prev {
    left: 0;
    opacity: 1;
    z-index: 1;
}

/* Carousel Scale */
.carousel .item.active {
    animation: zoom 30s;
    -moz-animation: zoom 30s;
    -webkit-animation: zoom 30s;
    -o-animation: zoom 30s;
}
@keyframes zoom {
    from {transform:scale(1);}
    to {transform:scale(2);}
}
@-moz-keyframes zoom {
    from {-moz-transform:scale(1);}
    to {-moz-transform:scale(2);}
}
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(1);}
    to {-webkit-transform:scale(2);}
}
@-o-keyframes zoom {
    from {-o-transform:scale(1);}
    to {-o-transform:scale(2);}
}

twitter bootstrap的旋转木马淡出过渡

4 个答案: