Twitter Bootstrap的轮播淡入淡出过渡

Question

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

我尝试了 @StrangeElement 修改过的 bootstrap.css，它几乎可以工作。问题在于当活动图像淡出时，它会淡出到白色，然后下一个图像将以没有淡入动画的方式弹出。我可能错过了什么吗？

以下是我正在使用的示例：

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

任何指针都将非常感激。谢谢！

- Dan Byers

Answer 1

请看这个 fiddle。不幸的是，它在任何当前可用版本的Internet Explorer上都不能正常工作。

你只需要给你的轮播div添加一个额外的类carousel-fade，它就可以正常工作了。

[来源]

这种转换显示下一张图片，然后淡化新图像盖在上面。如果您想要直接淡出淡入动画，请将以下行添加到CSS中。

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

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

- G.T.

---

谢谢！那对于“真正的”浏览器确实有效。不幸的是，我需要支持IE，所以我不得不寻找另一个解决方案。 - Dan Byers

@DanByers，你有没有找到另一个解决方案？ - Jordan Reiter

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 */
}

- pwnjack

Answer 3

我成功将旋转木马的图片效果从滑动改为淡入淡出，并且通过 CSS 缩放了图片，使其具有响应式特性:

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

在Webkit浏览器上，当淡入淡出动画激活时，每张图片都会被放大到其原始大小。而且，在每个动画完成后立即，图像将根据上述CSS规则再次正确缩放（立即，而不是动画）。当然，这种方式的动画看起来业余而且不流畅。因此，我添加了

-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 */
}

我在这里找到了这个解决方案：为什么应用'-webkit-backface-visibility:hidden;'可以解决ios / ipad 5.1上负边距过渡问题？

- Dennis Helfensteller

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

- Shawn Rebelo