Question

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

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

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

所以我想有一个仅限CSS的解决方案，将页面设置为可见性：在转换结束时隐藏（我不能使用display：none）。怎么去这里？

Answer 1

根据@Rev的答案，我创建了一个概念证明。它工作得很好（见fiddle）。

当你将“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;  }}

其他一些评论：

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

Answer 2

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

你可以查看CSS动画而不是过渡。我知道您无法转换visibility: hidden;，但您可以设置100％的动画关键帧来执行此操作。

Answer 3

不完全是JS-only，但是当你启动淡入淡出动画时，还要使用以下CSS将一个类添加到表单容器中：

.disableMouse * {
  pointer-events: none;
}

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

Answer 4

如果您的唯一目的是禁用互动，则可以在页面上使用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;
}

仅使用CSS淡出后隐藏元素

4 个答案: