html - CSS 过渡在 Chrome 中不起作用

Question

我正在使用 CSS 过渡来简化 Bootstrap 轮播中图像之间的过渡。这在 Chrome 和 Safari 中完美运行了几个月。突然间它在 Chrome 中不起作用。

HTML(在 Jade 中):

div(class="item")
    img.landing-bg(src="images/aa/ny58.jpg", alt="")

CSS:

.item {
    -webkit-transition: opacity ease-in-out 1s !important;
       -moz-transition: opacity ease-in-out 1s !important;
        -ms-transition: opacity ease-in-out 1s !important;
         -o-transition: opacity ease-in-out 1s !important;
            transition: opacity ease-in-out 1s !important;
}

.carousel .active.left {left:0;opacity:0;z-index:2;}

.carousel .active.right {right:0;opacity:0;z-index:2;}

Answer 1

我在一个元素中使用了一个小插件，.carousel-fade，它基本上就是你需要的:

HTML

<div id="myCarousel" class="carousel carousel-fade slide">
  ...
</div>

CSS

/*
 * Carousel Fade Plugin
 */
.carousel-fade .item {
  -webkit-transition: opacity ease-in-out 2s;
  -moz-transition: opacity ease-in-out 2s;
  -o-transition: opacity ease-in-out 2s;
  transition: opacity ease-in-out 2s;
}

.carousel-fade .active.left,
.carousel-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
}

jsFiddle example.