CSS Z-索引和变换怪异的闪光

Question

单击摘要中的图像（展开整页）以进行变换，并在动画卡落后时在右下角更加仔细地查看，您会发现它在不应该重叠时会稍微重叠。我在CSS的每个box div上应用z-index时发生。如果删除z-index，则不会出现Flash，但我的box div上需要z-indexs。否则，当我将它们改组时，我将无法具有这样的堆栈行为（除非我更改了不需要的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

修复实际上很简单-只需添加transition-property: transform，因为是您要转换（{{1} }是默认设置，而transition-property: all也是已转换）。

请参见下面的演示

z-index

$('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>是整数，过渡并没有多大意义-根据{{3}，动画类型为整数 }：

  

设置为动画时，将插入数据类型的值   使用离散的整个步骤。计算就好像它们是   实浮点数；离散值使用   楼层功能。插值的速度由   与动画关联的计时功能。

查看有关如何为z-index设置动画的示例：

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;
  }
}

这是为什么您的动画中出现闪烁。

Answer 2

我认为这仅仅是一个订单问题。 只需将.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 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索引，并且它可以正常工作。

$('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>