我正在使用 CSS 为文本添加动画，其中元素一个接一个地出现。首先尝试一下看看我的意思：
.wrapper {
pointer-events: none; /* remove pointer events from elements before they animate */
}
.text {
position: absolute;
}
/* The first element starts off visible and fades out after 2s */
.first {
opacity: 1;
animation: fade 500ms reverse forwards 2000ms;
}
/* The second element starts off hidden and fades in after 3s */
.second {
opacity: 0;
animation: fade 500ms forwards 3000ms;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
pointer-events: all; /* add pointer events to elements after they finish animating */
}
}
<div class="wrapper">
<h1 class="text first">Wait 2 seconds...</h1>
<h1 class="text second">Now <a href="https://example.com">click</a></h1>
<div>
正如您在代码片段中看到的，第二个元素有一个链接。默认情况下，即使它的不透明度仍然是，它在整个动画中都是可单击的0.
我希望链接仅在出现时才可单击，因此我正在设置pointer-events: none;在父元素上，并且pointer-events: all;孩子们完成动画后（在@keyframes).
这在 Chrome 和 Firefox 中效果很好，但在 Safari 中则不然：动画结束时链接不会变得可点击。家长pointer-event: none;规则在某种程度上不会被更具体的规则所覆盖pointer-events: all;应在动画结束时应用于元素本身的规则。
（您可以重现该问题或将其分叉这个代码沙盒 https://codesandbox.io/s/withered-river-xckye)
这是我的问题：
- 这是 Safari 的错误吗？我经历了Webkit 的问题跟踪器 https://bugs.webkit.org/buglist.cgi?quicksearch=pointer-events但找不到任何似乎相关的东西（还有很多其他
pointer-events虽然有错误）。
- 有没有一种方法可以在 Safari 中实现此功能，而无需借助 JavaScript？
提前致谢！
Edit
I found 一个办法 https://stackoverflow.com/a/67054940对于 Safari，使用visibility: hidden;而不是禁用指针事件，发布在下面。
我注意到的另一件事是，当我用以下命令测试我的代码时剧作家 https://github.com/microsoft/playwright（一个可以启动无头 webkit 浏览器的测试自动化工具），我无法重现pointer-eventsbug，所以我想知道这是否只是 Safari 的问题，而不是 webkit 本身的问题。我仍然有兴趣知道这是否是已知行为！
这是我寻求的也适用于 Safari 的解决方案：
.text {
position: absolute;
}
/* The first element starts off visible and fades out after 2s */
.first {
opacity: 1;
visibility: visible;
animation: fade 500ms reverse forwards 2000ms;
}
/* The second element starts off hidden and fades in after 3s */
.second {
opacity: 0;
visibility: hidden;
animation: fade 500ms forwards 3000ms;
}
@keyframes fade {
from {
opacity: 0; /* We still need opacity to animate on */
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
<div>
<h1 class="text first">Wait 2 seconds...</h1>
<h1 class="text second">Now <a href="https://example.com">click</a></h1>
<div>
而不是禁用pointer-events， 我们可以用visibility: hidden;以确保链接在应点击之前无法点击。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
