仅使用 CSS 淡出后隐藏元素

Posted 2023-03-06

【中文标题】仅使用 CSS 淡出后隐藏元素

【英文标题】：Hide element after fade out using only CSS

【发布时间】：2015-07-15 21:26:01

【问题描述】：

我有一个单页浏览器，它一次显示一页，并且在从一页转换到下一页时使用动画。它的工作原理是这样的：

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

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

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

【问题讨论】：

用 100% 宽高透明 div 包裹微调器元素怎么样？

这确实会阻止点击元素，但不会阻止对表单元素的标签。

然后使用JS禁用表单元素

这可行，但我正在寻找仅 CSS 的解决方案。

老实说，我认为 CSS 在这里是错误的方法。覆盖<div> 以防止点击，function noTab(e)e.preventDefault();e.stopPropagation();; window.addEventListener('keydown',noTab); 然后window.removeEventListener('keydown',noTab); 以防止跳动（和任何打字）是完成此操作的最安全和最可靠的方法（如果启用了JS，哈哈）。

【参考方案1】：

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

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

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; 

【讨论】：

1% 和 99% 帧的意义何在？没有它们，它似乎对我有用。

嗯，你是对的。我虽然动画开始时可见性会立即交换，但事实并非如此。这将导致在没有任何褪色的情况下打开和关闭。但是我错了，所以我会删除它们。谢谢！

【参考方案2】：

如果您的唯一意图是禁用交互，您可以在页面上使用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;

【参考方案3】：

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

.disableMouse * 
  pointer-events: none;

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

【讨论】：

好主意。我以前从未听说过mouse-evends。然而，它只会停止：鼠标事件。您仍然可以使用键盘切换到它并更改值。见jsfiddle.net/fpjpghLd

我只需要它是 CSS。此外，还有一些问题，如防止评论指出的那样。

是的...如果有一个与pointer-events 等效的键盘就好了。如果没有脚本来禁用表单元素，我看不到这样做的方法

【参考方案4】：

很确定我不能单独使用 CSS。您可以查看 javascript 的 transitionend。

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

【讨论】：

transitionend 活动对我来说是新的，看起来很酷。然而，它是 JS，我正在寻找仅 CSS 的解决方案。关键帧也很有趣。我会调查的。

是的，我已经好几年没用过它了，但它非常好。我会更多地关注动画，但我在移动设备上，祝你好运?

我根据您的关键帧想法创建了一个工作示例。有关详细信息，请参阅我自己的答案。感谢您的想法！