Javascript CSS转换：为什么赢'；难道我的CSS转换没有我预期的效果吗？

我在页面顶部有一个flash message div，当站点想要向用户显示任何消息时使用

我想几秒钟后闪光信息消失。我正在使用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（函数（flash）{
flash.classList.toggle（'hide'）；
})

我希望当页面加载时，div将在淡出之前可见。但是，在Safari中，当页面加载时，

.flash

不可见

在Chrome中，页面加载，

.flash

div按预期淡出。但是，在重新加载页面时，div仍然附加了

.hide

类，因此flash消息仍然不可见。（我可以用HTML存储状态？！！）奇怪的是，在Chrome中，当我重新加载页面时，如果我用开发人员工具检查文档中的元素，它就会工作

现在我非常困惑

为什么

.hide

在重新加载页面时仍然附加到div

---

为什么Safari根本无法显示div？

编辑：回复评论后，您需要做的是触发焦点事件的淡出

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

原因是切换，您的浏览器在浏览器缓存中保存页面的状态，但不保存在重新加载、打开和关闭时动态更改css的javascript

谷歌没有用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;
  }
}

---

这样做会更加流畅，您可以使用开发人员工具更轻松地进行测试。

我不使用jQuery。（看18:40左右）编码并创建频道。这个家伙（乔治·洛米兹）是一个CSS动画向导