CSS3 过渡 - 如何延迟 z-index 属性的重置？

Posted 2023-03-06

【中文标题】CSS3 过渡 - 如何延迟 z-index 属性的重置？

【英文标题】：CSS3 Transitions - How to delay reset of the z-index property?

【发布时间】：2012-05-22 04:53:22

【问题描述】：

基本上，通过 mouseenter 上的 javascript 动态地将“highlight”类添加到具有“edge”类的元素中。高亮类在鼠标离开时被删除。我想转换这些元素的边框颜色。然而，这个“highlight”类也修改了堆栈顺序。我希望在过渡开始之前（在 mouseenter 上）在所有突出显示的边缘上设置 z-index 1，并且我希望在过渡完成后（在 mouseleave 上）删除 z-index 1。目前 z-index 属性在“highlight”类被移除后立即重置。

基本设置：

.edge 

    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;


.edge.highlight 
    border-color: hsl(0, 0%, 85%);
    z-index: 1;

第一次尝试（显然延迟一方面固定了时间，另一方面又搞砸了）：

.edge 
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s, 0;
    -moz-transition-duration: 1s, 0;
    -o-transition-duration: 1s, 0;
    -webkit-transition-duration: 1s, 0;

    transition-delay: 0, 1s;
    -moz-transition-delay: 0, 1s;
    -o-transition-delay: 0, 1s;
    -webkit-transition-delay: 0, 1s;

    transition-property: border-color, z-index;
    -moz-transition-property: border-color, z-index;
    -o-transition-property: border-color, z-index;
    -webkit-transition-property: border-color, z-index;

非常感谢任何和所有的帮助。提前致谢。

编辑：请记住，在过渡有机会完成之前，用户可以在几个不同的边缘上进行鼠标进入/鼠标离开。谢谢。

【参考方案1】：

您可以按照 Jcubed 的建议使用延迟，或者使用计时函数 step-end 和 step-start。诀窍是使用两个不同的timing functions：stepped 用于z-index，linear 用于opacity 和其他连续属性。

edge 
    z-index: -1;
    opacity: 0;
    transition: z-index 0.5s step-end, opacity 0.5s linear;


edge.highlight 
    z-index: 1;
    opacity: 1;
    transition: z-index 0.5s step-start, opacity 0.5s linear;

示例：http://jsfiddle.net/cehHh/8/

【讨论】：

优雅的解决方案，不需要一堆 JS 并添加多个类。不错！

他们说transition-delay在ie10+中工作，和flexbox一样css-tricks.com/almanac/properties/t/transition-delay

美丽优雅。

这是同样的小提琴，但使用transition-delay:jsfiddle.net/7vy84p21

【参考方案2】：

使用transition-delay。您可以通过在元素处于悬停状态时为元素分配不同的延迟时间，使其在悬停时上升，但在悬停前等待一段时间。

示例：http://jsfiddle.net/vQqzK/1/

这适用于chrome，不确定它是否适用于其他浏览器。

https://developer.mozilla.org/en/CSS/transition-delay

【讨论】：

我根据我的具体情况调整了你的例子。它很近，但没有雪茄。问题是存在重叠的边缘，并且可能同时运行许多不同的转换。只要用户不在重叠边缘上级联转换（即等到 mouseleave 转换完成，然后在重叠边缘上开始另一个 mouseenter 转换），您的技术就可以工作。不过谢谢。几乎！我会投票赞成你的答案，因为它仍然有用，但我没有代表。

【参考方案3】：

您可以使用两个类，一个用于每个转换（第一个用于颜色，然后用于 z-index）。 请注意，为方便起见，以下是使用 jQuery 制作的，并且仅针对一个边缘。要为多个边缘执行此操作，您需要为每个边缘存储一个计时器。

给定以下标记：

​<div class="edge"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

.edge 
    width:40px;
    height:40px;
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;


.edge.highlight 
    border-color: hsl(0, 0%, 85%);
    z-index: 1;

.edge.endHl
    border-color: hsl(0, 0%, 65%);
    z-index: 1;

（我在第二个过渡中添加了一些颜色变化只是为了显示它）。

还有下面的JS：

var myTime = null;
function resetTime() 
    if (myTime !== null) 
        clearTimeout(myTime);
        myTime = null;
    

$(".edge").mouseenter(function() 
    resetTime();
    $(this).addClass("highlight");
    $(this).removeClass("endHl");
);
$(".edge").mouseleave(function() 
    resetTime();
    myTime = setTimeout(function() 
        $(".edge").removeClass("endHl");
    ,1000);
    $(this).removeClass("highlight");
    $(this).addClass("endHl");
);

它只会在 1 秒后移除 z-index，并且只会在退出时应用。

你可以在这里看到它的实际效果：http://jsfiddle.net/TptP8/

【参考方案4】：

如果您在使用来自 @z0r 的 z-index 过渡解决方案时遇到问题 - 您可以通过动画推迟 z-index 更改作为替代方案，但在 Safari 中过渡对我来说效果更好

.hasDelayedZIndex 
  animation: setZIndexWithDelay 0.01s 1s forwards;      


@keyframes setZIndexWithDelay 
  to 
    z-index: 1;