Question

我正在使用 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; 规则覆盖，该规则应该在动画结束时应用于元素本身。

（您可以重现该问题或在 this CodeSandbox 中将其分叉）

这是我的问题：

这是 Safari 的错误吗？我浏览了 Webkit's issue tracker，但找不到任何似乎相关的内容（不过还有很多其他 pointer-events 错误）。
有没有办法在不使用 JavaScript 的情况下在 Safari 中完成这项工作？

提前致谢！

编辑

我通过使用 visibility: hidden; 而不是禁用指针事件找到了 Safari 的 a solution，发布如下。

我注意到的另一件事是，当我使用 Playwright（一种可以启动无头 webkit 浏览器的测试自动化工具）测试我的代码时，我无法重现 pointer-events 错误，所以我想知道这是否只是 Safari 的问题，而不是 webkit 本身的问题。我仍然想知道这是否是已知行为！

Answer 1

这是我采用的解决方案，它也适用于 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; 来确保链接在应该点击之前无法点击。

在 Safari 中无法点击动画后接收指针事件的链接

编辑

1 个答案: