CSS 过渡：为什么我的 CSS 过渡无法按预期工作？答案

【问题标题】：CSS transitions: Why won't my CSS transition work as I expect?CSS 过渡：为什么我的 CSS 过渡无法按预期工作？
【发布时间】：2021-04-05 14:31:49
【问题描述】：

当网站想要向用户显示任何消息时，我的页面顶部有一个 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 类，因此 flash 消息仍然不可见。（我可以将状态存储在 HTML 中？！！）奇怪的是，在 Chrome 中，如果我在重新加载页面时使用开发人员工具检查文档中的元素，它就可以工作。

现在我很困惑。

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

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

【问题讨论】：

我没有使用 jQuery。
youtube.com/watch?v=SPtSMjZlyUU（看 18:40 左右）CodeAndCreate 频道。这家伙 (George Lomidze) 是一名 CSS 动画向导

标签： javascript css-transitions

【解决方案1】：

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

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

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

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

这种方式更加流畅，您可以使用开发者工具更轻松地对其进行测试。

【讨论】：