时间戳

首页 > 解决方案 > 在 Safari 上的 CSS3 过渡结束时维护 z-index

css - 在 Safari 上的 CSS3 过渡结束时维护 z-index

问题描述

我想通过单击来更改 div 的 z-index，仅使用 CSS3。我可以在除 safari 之外的所有浏览器中使用我的代码来实现它。我已经尝试过使用 :target 过渡和 :target 动画（使用动画填充模式：转发），但两者都不起作用。

这是我的代码（简化）：

#flap1 {
z-index: 30;
}

#flap1:target {
transition: all 1s ease-in-out;
z-index: 1;
}

如何将 z-index 保持在最终值 (=1) 中？在动画进行时，z-index 确实会改变它的值。

标签： css

解决方案

我不确定这可以用 CSS 完成。您可以运行一个简单的 JavaScript 函数来获得这种效果。此外，具有 z-index 的元素需要相对定位、绝对定位或固定定位才能使 z-index 生效。

CSS：

#flap1 {
  position: relative; /* Change positioning to your liking */
  z-index: 30;
  transition: all 1s ease-in-out;
}

JavaScript：

var box = document.getElementById('flap1');

box.addEventListener('click', function() {
  this.style.zIndex = '1';
});

推荐阅读