從 display: none 過渡到 display: block 時，我觸發了這個簡單的影片。它在 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>uj5u.com熱心網友回復：
訣竅是：給影片一個非常小的延遲，假設0.0001s你去。
.animated {
animation: myAnimation 0.4s ease-out 0.0001s;
}
當您使用帶有display非影片屬性的 CSS 影片時，不同的瀏覽器會以不同的方式處理它，并且以某種方式無法預測。
當我們放一個小的延遲時它起作用的原因是在文本從右向左滑動之前，文本不應該出現在螢屏上，因此，display: none. 然而，正如我所說，display它不是影片的，所以文本會立即出現，導致沒有可見的過渡，我們要做的是給它一些時間讓它消失。
無論如何，這仍然是一個技巧，當您在 Safari 上切換到另一個選項卡然后回傳時，影片將不會運行。最好不要display用于影片。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420527.html
標籤：