Css z-index 和 transform weird flash

Question

单击片段中的图像（展开整页）以运行变换并在动画卡片落后时更仔细地观察右下角，您会看到它在不应该重叠的地方略微重叠。当我在 CSS 中的每个框 div 上应用 z-index 时，就会发生这种情况。如果我删除 z-index，则没有闪光灯，但我的盒子 divs 需要 z-indexes。否则，当我将它们洗牌时，我不能让堆栈表现得如此（除非我更改了我不想要的 DOM 顺序）。我曾尝试在 CSS 中使用一些 backface-visibility，但没有成功。我怎样才能摆脱这种闪光？

$('body').on('click', function() {

  var box = $('#a2')

  box.one("transitionend", function() {

    box.css("zIndex", -1).one("transitionend", function() {

    }).removeClass('t').addClass('t2')

  }).addClass('t')


})

.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

据我所知，在所有浏览器中都会发生。

Answer 1

我认为这只是顺序问题。只需将 .css (" zIndex ", -1) 放在 .addClass ('t') 旁边：这样就不会发生闪光，因为在向后翻译之前应用了 z-index

$('body').on('click', function() {
  var box = $('#a2')
  box.one("transitionend", function() {
    box.removeClass('t').addClass('t2')
  }).css("zIndex", -1).addClass('t')
})

Answer 2

修复实际上很简单 - 只需添加 transition-property: transform 因为是你想要的 transform（transition-property: all 是默认值，z-index 也是 transitioned）。

参见下面的演示：

$('body').on('click', function() {
  var box = $('#a2')
  box.one("transitionend", function() {
    box.css("zIndex", -1).removeClass('t').addClass('t2')
  }).addClass('t')
});

.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
  transition-property: transform; /* added */
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

为什么会闪烁？

注意 z-index 是一个整数，transition 没有多大意义 - 动画类型是 integer 根据 MDN:

When animated, values of the data type are interpolated using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. The speed of the interpolation is determined by the timing function associated with the animation.

查看如何制作动画的示例 z-index:

div {
  position: absolute;
  border: 1px solid;
}

.container div {
  width: 100px;
  height: 100px;
}

.container .box {
  background-color: cadetblue;
  z-index: 1;
  animation: stack 5s infinite linear;
}

.box + div {
  top: 10px;
  left: 10px;
  z-index: 1;
  background-color: lightblue;
}

.box + div + div {
  top: 20px;
  left: 20px;
  z-index: 2;
  background-color: aliceblue;
}

@keyframes stack {
  50% {
    z-index: 3;
  }
}

<div class="container">
  <div class="box"></div>
  <div></div>
  <div></div>
</div>

这就是为什么你的动画会出现闪烁。

Answer 3

我刚刚用 jQuery 更新更新了您的代码。实际上，我只是将您的 box.css("zIndex", -1).addClass('t'); 脚本移动到 setTimeout 方法中。试试这个我希望它会解决你的问题。谢谢

$('body').on('click', function() {

  var box = $('#a2')
  box.one("transitionend", function() {
    box.one("transitionend").addClass('t2');
  })
  setTimeout(function(){
    box.css("zIndex", -1).addClass('t');
  })

})

.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;  
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

Answer 4

我尝试增加后续图像的 z-index，它起作用了。

$('body').on('click', function() {

  var box = $('#a2')
  var i=0;
  box.one("transitionend", function() {
    // increase the z-index
    $("#a1").css("zIndex", 99);
  
    box.css("zIndex", -1).one("transitionend", function() {

    }).removeClass('t').addClass('t2')

  }).addClass('t')


})

.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

Css z-index 和 transform weird flash

Css z-index and transform weird flash

javascript

css

css-transitions

css-transforms