CSS z-index 和转换奇怪的 flash

Question

单击片段中的图像（展开整页）以运行变换并在动画卡片落后时更仔细地查看右下角，您会看到它在不应该重叠时略微重叠。 当我在 CSS 中的每个框 div 上应用z-index时，我就会发生这种情况。 如果我删除z-index ，则没有闪光，但我的盒子 div 上需要 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

修复实际上很简单 - 只需添加transition-property: 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是一个整数，转换它没有多大意义 - 根据MDN动画类型是整数：

动画时，数据类型的值使用离散的、完整的步骤进行插值。 计算就像是真实的浮点数一样； 离散值是使用 floor 函数获得的。 插值的速度由与动画相关的计时函数决定。

查看如何为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 2

我认为这只是一个订单问题。 只需将.css (" zIndex ", -1)放在.addClass ('t') .css (" zIndex ", -1)旁边：这样就不会发生 flash，因为 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-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>