仅使用CSS淡出后隐藏元素

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

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

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

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

最佳答案

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

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

HTML


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元素中的子元素具有明确的可见性：可见设置,那么它们将通过鼠标对交互作出反应.这是因为由于不透明度而不会隐藏只是隐形：0.例如,twitter bootstrap collapse插件就是这样做的.您可以通过将其可见性设置为继承而不是可见来解决此问题.这将导致它们仅在父项为父时才可见.例如,崩溃插件可以使用这个额外的css来表现：
.page .collapse {
  能见度：继承;
}
>这在IE 9及更低版本中不起作用.
>您需要我的代码中显示的浏览器前缀才能使其正常工作.我测试了这个没有前缀,最新的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; }
}


 原文链接：https://www.f2er.com/css/427644.html

仅使用CSS淡出后隐藏元素

猜你在找的CSS相关文章