CSS 转换：为什么我的 CSS 转换不能像我预期的那样工作？

Question

我的页面顶部有一条闪现消息 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(function(flash){
  flash.classList.toggle('hide');
})

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

在 Chrome 中，页面加载并且 .flash div 按预期淡出。但是，在重新加载页面时，div 仍然附加了 .hide class，因此闪现消息仍然不可见。（我可以在 HTML 中存储状态？！！）奇怪的是，在 Chrome 中，如果我在重新加载页面时使用开发人员工具检查文档中的元素，它就可以工作。

现在我很困惑。

为什么 .hide 在页面重新加载后仍然附加到 div？

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

Answer 1

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

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

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

不是用 javascript 操纵 css，而是用 css 淡出 google。

.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;
  }
}

这样就顺畅多了，用开发者工具测试也更方便。

CSS 转换：为什么我的 CSS 转换不能像我预期的那样工作？

CSS transitions: Why won't my CSS transition work as I expect?

javascript

css-transitions