css - 仅使用 CSS 淡出后隐藏元素

Question

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

1. 用户点击按钮
2. ajax 调用已完成，在等待响应时页面淡出(不透明度:0)
3. 如果服务器在淡出完成后 500 毫秒内没有响应，则微调器淡入并停留在那里，直到 ajax 调用完成
4. 收到响应时，微调器淡出，新页面淡入。

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

所以我想要一个仅 CSS 的解决方案，将页面设置为 visibility: hidden 在过渡结束时(我不能使用 display: none)。去这里的路是什么？

Answer 1

根据@Rev 的回答，我创建了一个概念验证。它工作得很好(参见 fiddle )。

当您将“fadeOut”类添加到 div 时，它会淡出并以 visibility: hidden 状态结束。删除类(class)，它再次淡入。您可以通过将鼠标悬停在它上面来判断它确实是隐藏的:如果隐藏，它将不再提供“文本选择”鼠标指针。

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

一些补充说明:

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

   .page .collapse { 可见性:继承；

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

3. 您需要在我的代码中看到的浏览器前缀才能完成这项工作。我在没有前缀的情况下进行了测试，最新的 chrome (42) 和 firefox (37) 没有它们就无法工作。这很丑陋，但可以通过将 SASS 与 Compass 结合使用来变得更容易。下面是使用该方法的相同代码:

带指南针的 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; }
}