Question

我遇到了修改Bootstrap 3轮播以获得fade而非“幻灯片”的示例。但是，在webkit中，示例中的转换并不顺利 - 它在项目之间闪烁。

http://codepen.io/Rowno/pen/Afykb

Weirder仍然，当我在我的标记中使用此代码时，项目会平滑过渡，但页面上的其他元素在每次过渡开始时都会以像素左右的方式抖动。

是否存在某种与不透明度转换不兼容的Webkit？

Answer 1

可能有多种方法可以解决这个问题，但对this question的回答建议将以下内容添加到应用转换的项目中：

-webkit-transform: translateZ(0);

这使得codepen示例在Webkit中顺利运行，并且还修复了我在代码中遇到的问题。

Answer 2

改变身体的背景并轻松过渡

body{
 bacground:black; 
}
.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out;
      -moz-transition: opacity 300ms ease-in-out;
       transition: opacity 300ms ease-in-out;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

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



html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
  height: 100%;
}

.item:nth-child(1) {
  background: darkred;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: orange;
}

Webkit问题与css3不透明度转换？

2 个答案: