CSS 轉換：為什么我的 CSS 轉換不能按預期工作？

Question

當網站想要向用戶顯示任何消息時，我的頁面頂部有一個 flash 消息 div。

我希望 flash 消息在幾秒鍾后淡出。 我正在使用 CSS 過渡。

這是我的代碼：

.flash {
  position: fixed;
  opacity: 1;
  visibility: visible;
  transition: opacity 2s ease-in, visibility 2s ease-in;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

document.querySelectorAll('.flash').forEach(function(flash){
  flash.classList.toggle('hide');
})

我希望當頁面加載時，div 在淡出之前是可見的。 但是，在 Safari 中，當頁面加載時， .flash是不可見的。

在 Chrome 中，頁面加載並且.flash div 按預期消失。 但是，在重新加載頁面時，該 div 仍然附加了.hide class ，因此 flash 消息仍然不可見。 （我可以將 state 存儲在 HTML 中？，，）奇怪。 在 Chrome 中，如果我在重新加載頁面時使用開發人員工具檢查文檔中的元素，它會起作用。

現在我很困惑。

為什么.hide在頁面重新加載時仍然附加到 div？

為什么 Safari 根本無法顯示 div？

Answer 1

編輯：在您的評論回復后，您需要做的是觸發焦點事件的淡出。

.flash:focus {
  //use the fadeout code here
}

原因是切換，您的瀏覽器將頁面的 state 保存在瀏覽器的緩存中，而不是 javascript 在重新加載、打開和關閉時動態更改 css。

google 沒有使用 javascript 來操作 css，而是使用 css 淡出。

.fade-out {
  animation: fadeOut ease 10s;
  -webkit-animation: fadeOut ease 10s;
  -moz-animation: fadeOut ease 10s;
  -o-animation: fadeOut ease 10s;
  -ms-animation: fadeOut ease 10s;
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

這種方式更流暢，您可以使用開發人員工具更輕松地對其進行測試。