仅使用 CSS 淡出后隐藏元素

Question

我有一个单页机，它一次显示一页，并且在从一页过渡到下一页时使用动画。它是这样工作的：

用户点击按钮
ajax 调用已完成，在等待响应时页面淡出（不透明度：0）
如果服务器在淡出结束后 500 毫秒内没有响应，微调器会淡入并停留在那里，直到 ajax 调用结束
收到响应时，微调器淡出，新页面淡入。

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

所以我想要一个 CSS 唯一的解决方案，将页面设置为可见性：在过渡结束时隐藏（我不能使用显示：none）。到这里怎么走？

Answer 1

很确定我无法单独使用 CSS。您可以查看 JavaScript 的 transitionend.

您也可以查看 CSS 动画而不是过渡。我知道你不能过渡 visibility: hidden; 但你可以设置一个 100% 的动画关键帧来做到这一点。

Answer 2

不完全是 JS-only，但是当你开始淡入淡出动画时，还要在表单容器中添加一个 class，其中包含以下 CSS:

.disableMouse * {
  pointer-events: none;
}

这将禁用点击（但不会禁用滚动）。适用于当前所有浏览器，但仅在版本 11 中添加了 IE 支持。因此，如果您需要支持 IE10 及更早版本，这可能不是您的最佳选择。

Answer 3

如果您的唯一目的是禁用交互，您可以在页面上使用 pointer-events: none (IE11+)，或者在顶部使用浮动拦截器，例如；

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

Answer 4

根据@Rev 的回答，我创建了一个概念验证。它运行良好（参见 fiddle）。

当您将 class 'fadeOut' 添加到 div 时，它将淡出并以可见性结束：隐藏状态。删除 class 并再次淡入。您可以通过将鼠标悬停在它上面来判断它是否真的隐藏了：如果隐藏它将不再提供 "text selection" 鼠标指针。

HTML

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

CSS

  .page {
      -moz-animation-name: fadeIn;
      -webkit-animation-name: fadeIn;
      -ms-animation-name: fadeIn;
      animation-name: fadeIn;
      -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -ms-animation-duration: 1s;
      animation-duration: 1s;
      -moz-animation-timing-function: ease-in-out;
      -webkit-animation-timing-function: ease-in-out;
      -ms-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -moz-animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      animation-fill-mode: forwards;  
    }

    .page.fadeOut {
      -moz-animation-name: fadeOut;
      -webkit-animation-name: fadeOut;
      -ms-animation-name: fadeOut;
      animation-name: fadeOut;
    }

    @-moz-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
    @-webkit-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
    @-ms-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}
    @-keyframes fadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; }}

    @-moz-keyframes fadeOut { 0% { opacity: 1; visibility: visible; }  100% { opacity: 0; visibility: hidden; }} 
    @-webkit-keyframes fadeOut { 0% { opacity: 1; visibility: visible; }  100% { opacity: 0; visibility: hidden; }} 
    @-ms-keyframes fadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; }} 
    @-keyframes fadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden;  }}

一些补充说明：

如果 .page 元素中的 child 元素已明确设置为 visibility: visible，则它们将对通过鼠标进行的交互做出反应。这是因为它们不是隐藏的，只是由于不透明度：0 不可见。例如，twitter bootstrap collapse 插件就是这样做的。您可以通过将它们的可见性设置为 inherit 而不是 visible 来解决这个问题。这将导致它们仅在 parent 可见时才可见。例如，折叠插件可以使用这个额外的 css:

.page .collapse { 可见性：继承； }
这在 IE 9 及以下版本中不起作用。
您需要我的代码中所见的浏览器前缀才能完成这项工作。我在没有前缀的情况下进行了测试，最新的 chrome (42) 和 firefox (37) 没有它们就无法工作。这很难看，但可以通过在 Compass 中使用 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; }
}

仅使用 CSS 淡出后隐藏元素

Hide element after fade out using only CSS

css

css-transitions