Javascript 推特引导&x27；s旋转淡入过渡

这是一个关于@StrangeElement对这个旧问题的回答的后续问题：

我试着将@StrangeElement的mod添加到bootstrap.css中，几乎可以正常工作了。问题是，当活动图像淡入淡出时，它会淡入白色，然后下一个图像将弹出，而不会淡入动画。我可能会错过什么

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

任何类型的指针都将非常感谢。谢谢

休息一下。不幸的是，它在任何当前可用的Internet Explorer版本上都不起作用

您的旋转木马

div

只需添加一个额外的类

carousel fade

即可工作

[]

此过渡显示下一个图像，然后在其顶部淡出新图像。如果您想要直接淡入淡出动画，请将这些线添加到css中

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

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

添加以下内容如何：

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

---

我成功地将旋转木马更改为淡入淡出的图像，而不是滑动图像。我还通过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 */
}

---

在这里我找到了这个解决方案：

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

真的不需要添加额外的类。 引导程序3.3.6

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

---

谢谢这当然适用于“真正的”浏览器；）。不幸的是，我确实需要支持IE，所以我不得不寻找另一种解决方案。@DanByers，你找到另一种解决方案了吗？

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