Webkit的问题与CSS3过渡不透明?(Webkit issue with css3 opacit

2019-10-18 19:39发布

我碰到修改引导3转盘来实现的这个例子中fade ,而不是一个“滑”。 WebKit中,然而,在该示例的过渡是不平稳 - 它项之间排序闪烁。

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

怪异的是,当我在我的标记使用此代码,该项目顺利过渡,但在每一个转变的开始上的排序轻摇页面其他元素由像素左右。

是否有某种形式的不透明度过渡的Webkit不兼容的?

Answer 1:

有可能是解决这一问题的方法不止一种,但回答这个问题,建议增加以下内容在其上被应用的过渡项目:

-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 issue with css3 opacity transition?