仅使用CSS淡出后隐藏元素

Question

我有一个一个页面,一次显示一个页面,并在从一个页面转换到下一个页面时使用动画.它的工作原理如下:

1. 用户单击按钮
2. 完成ajax调用并在等待响应时页面淡出(不透明度:0)
3. 如果在淡出结束后500毫秒完成,我们没有来自服务器的响应,一个微调器淡入并保持在那里直到ajax调用结束
4. 收到响应时,微调器淡出,新页面淡入.

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

所以我想有一个只有CSS的解决方案,将页面设置为可见性:在转换结束时隐藏(我不能使用display:none).怎么去这里？

Answer 1

基于@Rev的答案,我创建了一个概念证明.它工作得很好(见小提琴).

当您将"fadeOut"类添加到div时,它将淡出并以visibility:hidden状态结束.删除该类,它再次淡入.你可以通过将鼠标悬停在它上面来确定它是真正隐藏的:如果隐藏它将不再提供"文本选择"鼠标指针.

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设置的子元素,那么他们将通过鼠标对交互作出反应.这是因为不透明因为不透明而隐藏不可见:0.例如,twitter bootstrap collapse插件就是这样做的.您可以通过将其可见性设置为inherit而不是来解决此问题visible.这将导致它们仅在父项为父时才可见.例如,崩溃插件可以使用这个额外的css来表现:

   .page .collapse {visibility:inherit; }

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