仅使用CSS在淡出后隐藏元素

我有一个一次显示一页的单页程序，在从一页转换到下一页时使用动画。它的工作原理如下：

用户点击一个按钮

ajax调用完成，在等待响应时，页面淡出（不透明度：0）

如果在淡出完成后500毫秒内服务器没有响应，微调器淡入并保持在那里，直到ajax调用完成

收到响应时，微调器淡出，新页面淡入

我目前在页面的不透明度上使用CSS 3转换动画。然而，这个问题是，在微调器可见期间，用户仍然可以与刚刚淡出的页面（不可见）形式交互（它没有消失，只是使用不透明度不可见）

---

因此，我希望有一个仅CSS的解决方案，将页面设置为可见性：在转换结束时隐藏（我不能使用display:none）。在这里该怎么办？

我很确定，单靠CSS是做不到的。您可以查看JavaScript的

transitionend

---

您可以查看CSS动画，而不是转换。我知道你不能转换

可见性：隐藏但您可能可以将动画关键帧设置为100%来完成此操作。
不仅完全是JS，而且在启动淡入淡出动画时，还可以使用以下CSS向表单容器添加一个类：

.disableMouse * {
  pointer-events: none;
}

这将禁用单击（但不会禁用滚动）。适用于所有当前浏览器，但IE支持仅在版本11中添加。因此，如果您需要支持IE10及更早版本，这可能不是您的最佳选择。
如果您的唯一目的是禁用交互，您可以在页面上使用
指针事件：none
（IE11+），或在顶部使用浮动阻止程序，如

.page.loading {
    position: relative;
}
.page.loading:after {
    content: ' ';
    display: block;
    position: relative;
    background: white;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

根据@Rev的答案，我创建了一个概念证明。它工作得很好（参见）

当您将类“淡出”添加到div时，它将淡出并以可见性结束：隐藏状态。移除该类，它将再次淡入。您可以通过将鼠标悬停在它上面来判断它是否真的隐藏了：如果隐藏，它将不再给出“文本选择”鼠标指针

HTML

<div class="page">
    Lorem ipsum etc etc etc. 
</div>

一些补充意见：

如果
.page
元素中的子元素明确设置了
可见性：可见
，则它们将通过鼠标对交互作出反应。这是因为它们不是隐藏的，只是由于不透明度0而不可见。例如，twitter引导
collapse
插件就是这样做的。您可以通过将其可见性设置为
inherit
而不是
visible
来解决此问题。这将导致它们只有在其父对象为的情况下才可见。例如，可以使用以下附加css使折叠插件正常工作：

.翻页.折叠{
可见性：继承；
}

这在IE 9及以下版本中不起作用

您需要在我的代码中看到的浏览器前缀来实现这一点。我在没有前缀的情况下进行了测试，没有前缀，最新的chrome（42）和firefox（37）都无法工作。这很难看，但可以通过使用类似于带指南针的SASS的东西来简化。下面是使用该方法的相同代码：

带指南针的SASS

.page { 
  @include animation(fadeIn 1s ease-in-out forwards); 
}

.page.fadeOut { 
  @include animation-name(fadeOut); 
}

@include keyframes(fadeIn) {
  0% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}

@include keyframes(fadeOut) {
  0% { opacity: 1; visibility: visible; }  
  100% { opacity: 0; visibility: hidden; }
}

用一个100%宽度和高度透明的div来包装spinner元素怎么样？这确实会阻止单击元素，但不会阻止对表单元素的制表符。然后使用JS禁用表单元素，这会起作用，但我正在寻找一个只使用CSS的解决方案。老实说，我认为CSS在这里是错误的方法。防止点击的覆盖层和函数noTab（e）{e.preventDefault（）；e.stopPropagation（）；}；window.addEventListener（'keydown'，noTab）和之后的
窗口。移除EventListener（'keydown'，noTab）
防止制表符（以及任何键入）是完成此操作的最安全、最可靠的方法（如果启用了JS，哈哈）。transitionend事件对我来说是全新的，看起来非常酷。然而，它是JS，我正在寻找一个CSS唯一的解决方案。关键帧也很有趣。我会调查的。是的，我已经好几年没用了，但它很不错。我想看更多的动画，但我在手机上，所以祝你好运，我根据你的关键帧想法创建了一个工作示例。有关详细信息，请参见我自己的答案。谢谢你的主意！好主意。我以前从未听说过鼠标夜。然而，它只会停止：鼠标事件。您仍然可以使用键盘对其进行制表并更改值。看，我需要它只是CSS。此外，这也有一些问题，如评论所指出的。是的。。。如果有一个与
指针事件
相当的键盘就好了。如果没有禁用表单元素的脚本，我看不到实现这一点的方法。1%和99%帧的要点是什么？没有他们对我似乎很管用。嗯，你说得对。我原以为动画开始时可见性会立即交换，但事实并非如此。这将导致开关没有任何衰减。但我错了，所以我会把它们去掉。谢谢
.page { 
  @include animation(fadeIn 1s ease-in-out forwards); 
}

.page.fadeOut { 
  @include animation-name(fadeOut); 
}

@include keyframes(fadeIn) {
  0% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}

@include keyframes(fadeOut) {
  0% { opacity: 1; visibility: visible; }  
  100% { opacity: 0; visibility: hidden; }
}