CSS3 转换 - 如何延迟 z 索引属性的重置
CSS3 Transitions - How to delay reset of the z-index property?
基本上,一个"highlight"类通过javascript在mouseenter上动态地添加到具有类"edge"的元素中。鼠标离开时删除突出显示类。我想转换这些元素的边框颜色。但是,这个"突出显示"类也会修改堆栈顺序。我希望在过渡开始之前(在鼠标输入时)在所有突出显示的边缘上设置 z 索引 1,并希望在过渡完成后(在鼠标离开时)删除 z 索引 1。目前,删除"突出显示"类后,将立即重置 z-index 属性。
基本设置:
.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;
}
非常感谢任何和所有的帮助。提前谢谢。
编辑:请记住,在过渡有机会完成之前,用户可以在几个不同的边缘上鼠标输入/鼠标离开。谢谢。
您可以使用延迟,如 Jcubed 建议的那样,或者定时函数step-end
和step-start
。诀窍是使用两种不同的定时函数:步进表示z-index
,线性用于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/
使用 transition-delay
.您可以通过在元素处于悬停状态时为元素分配不同的延迟时间来使其在悬停时上升,但在悬停时等待一段时间。
示例:http://jsfiddle.net/vQqzK/1/
这适用于 chrome,不确定它是否适用于其他浏览器。
https://developer.mozilla.org/en/CSS/transition-delay
您可以使用两个类,每个过渡一个(第一个用于颜色,然后用于 z 索引)。请注意,为方便起见,以下内容是使用 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 索引,并且仅在退出时应用。
你可以在这里看到它的实际效果:http://jsfiddle.net/TptP8/
如果您在使用@z0r的 z 索引过渡解决方案时遇到问题 - 您可以通过动画作为替代方案推迟 z 索引更改,但在 Safari 中过渡对我来说效果更好
.hasDelayedZIndex {
animation: setZIndexWithDelay 0.01s 1s forwards;
}
@keyframes setZIndexWithDelay {
to {
z-index: 1;
}
}
- 未捕获的InvalidValueError:在属性原点中:索引0处:不是字符串,也不是LatLng或LatLngLite
- BackboneJS重新排列集合中模型的最佳方式,同时为每个模型维护0索引的有序属性
- javascript :将 2 个数组与属性和索引合并
- 如何观察聚合物元素属性值从索引.html的变化
- 使用 javascript 更改 Gridview 文本框的可见属性 true 在下拉列表的选定索引更改事件上为 tru
- 如何有效地搜索具有介于 jquery 之间的索引的 name 属性的输入
- 根据对象属性对 JavaScript 对象进行排序,但维护索引
- 未捕获的类型错误:无法读取 null(索引):110 的属性“样式”
- JS 数组无法读取未定义的属性 663,并将计算作为索引
- 为什么这是 for 循环返回字符的索引而不是整个属性
- 如何按索引引用对象属性
- 我想知道是否可以更改形状的属性 z 索引?诺基亚地图API
- 当对象本身存储在 JavaScript 的数组索引中时,如何打印对象的每个单独属性
- 来自 jsp 和 javascript 中的请求属性的对象索引数组
- 如何基于查找对象中的对象的属性来查找对象的索引值
- CSS3 转换 - 如何延迟 z 索引属性的重置
- JQuery ToggleClass使用索引属性
- 下拉框选择索引属性
- 如何让Jasmine jQuery正确读取z索引属性
- 如何将选项卡索引属性添加到 nvd3 饼图