仅使用CSS淡出后隐藏元素 [英] Hide element after fade out using only CSS

问题描述

我有一个寻呼机，一次显示一页，并且在从一页过渡到下一页时使用动画。它的工作原理如下：

I have a one pager that shows one page at a time and that uses animation when transitioning from one page to the next. It works like this:

1. 用户单击按钮


2. Ajax调用已完成，正在等待响应页面淡出（不透明度：0）


3. 如果服务器在淡出完成后500毫秒内没有响应，则微调器淡入并停留在那里直到ajax调用结束


4. 接收到响应后，微调器淡出，新页面淡入。

1. The user clicks on a button
2. An ajax call is done and while waiting for the response the page fades out (opacity: 0)
3. If the server does not respond within 500 msec after the fade out finishes a spinner fades in and stays there until the ajax call finishes
4. When receiving the response the spinner is faded out and the new page fades in.

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

I currently use a CSS 3 transition animation on the opacity of the page. This issue is however that during the time the spinner is visible the user can still interact with the (invisible) form of the page that just faded out (it's not gone, it's just invisible using opacity).

因此，我希望有一个仅CSS的解决方案，可将页面设置为可见性：在过渡结束时隐藏（我不能使用display：none）。

So I would like to have a CSS only solution that sets the page to visibility: hidden at the end of the transition (I cannot use display: none). What would be the way to go here?

推荐答案

基于@Rev的答案，我创建了一个概念证明。效果很好（请参见小提琴）。

Based on the answer of @Rev I created a proof of concept. It works nicely (see fiddle).

当您将 fadeOut类添加到div时，它会淡出并以可见性结束：隐藏状态。删除该类，它会再次消失。您可以通过将鼠标悬停在它上面来表明它确实是隐藏的：如果隐藏它，将不再提供文本选择鼠标指针。

When you add the class 'fadeOut' to the div it'll fade out and end with a visibility: hidden state. Remove the class and it fades in again. You can tell that it is really hidden by hovering your mouse over it: if hidden it will no longer give the "text selection" mouse pointer.

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 元素中具有明显具有可见性的子元素：可见设置它们，然后它们将通过鼠标对交互做出反应。这是因为由于不透明度，嘿并没有被隐藏而只是不可见：0。twitter bootstrap collapse 插件可以做到这一点。您可以通过将其可见性设置为继承而不是 visible 来解决此问题。这将导致它们仅在其父项可见时才可见。例如，可以使用以下额外的CSS来使折叠插件发挥作用：

1. If you have child elements in the .page element that have explicitly visibility: visible set on them then they will react to interaction via mouse. This is because hey are not hidden just invisible due to the opacity: 0. The twitter bootstrap collapse plugin does this for instance. You can solve this by setting their visibility to inherit instead of visible. This will cause them to only be visible if their parent is. For instance the collapse plugin can be made to behave using this additional css:

.page .collapse {
可见性：继承；
}

.page .collapse { visibility: inherit; }

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

This does not work in IE 9 and below.

您需要使用在我的代码中看到的浏览器前缀来使此工作有效。我没有前缀就进行了测试，没有它们，最新的chrome（42）和firefox（37）都不起作用。这很丑陋，但可以通过在Compass中使用类似SASS的方法来简化。这是使用该方法的相同代码：

You need the browser prefixes as seen in my code to make this work. I tested this without the prefixes and both the latest chrome (42) and firefox (37) did not work without them. This is ugly but can be made easier by using something like SASS with Compass. Here's the same code using that approach:

使用Compass进行导航

.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淡出后隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！