Safari：CSS 动画从显示过渡时不会第二次启动：none 显示：块

Question

我在从 display: none 转换到 display: 块时触发了这个简单的动画。它在 Chrome 上完美运行，但在 Safari 上它仅在第一次触发，当我隐藏元素然后再次显示它时，它不起作用。

.child1 {
  display: none;
}

.child2 {
  display: block;
}

.visibility .child1 {
  display: block;
}

.visibility .child2 {
  display: none;
}

@keyframes myAnimation {
  0% { transform: scale(0.5); }
}

.animated {
  animation: myAnimation 0.4s ease-out;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="testdiv" class="visibility">
    <div class="child1">Hello</div>
    <div class="child2 animated">Bye</div>
</div>

<script>
    const elem = document.getElementById("testdiv");

    elem.addEventListener("click", () => {
        if (!elem.classList.length) {
            elem.classList.add("visibility");
        } else {
            elem.classList.remove("visibility")
        }
    })
</script>
</body>
</html>

Answer 1

诀窍是：给动画一个非常小的延迟，比方说 0.0001s 然后就可以了。

.animated {
  animation: myAnimation 0.4s ease-out 0.0001s;
}

当您将 CSS 动画与 display - non-animatable 属性一起使用时，不同的浏览器会以不同的方式处理它，并且在某种程度上是不可预测的。

当我们放置一个小的延迟时它起作用的原因是在文本从右向左滑动之前，文本不应该出现在屏幕上，因此，display: none。然而，正如我所说，display 不可设置动画，因此文本会立即出现，导致过渡不可见，我们要做的是给它一些时间消失。

总之，这还是个技巧，当你在 Safari 上切换到另一个标签页然后返回时，动画不会运行。动画最好不要用display

Safari：CSS 动画从显示过渡时不会第二次启动：none 显示：块

Safari: CSS animation doesn't start second time when transitioning from display: none to display: block

html

javascript

css

safari

animation