不透明度 FadeIn 和 FadeOut 问题 - FadeOut 仅失败 CSS

Posted 2023-05-08

【中文标题】不透明度 FadeIn 和 FadeOut 问题 - FadeOut 仅失败 CSS

【英文标题】：Opacity FadeIn and FadeOut Problems - FadeOut Failing CSS Only

【发布时间】：2021-10-15 07:42:27

【问题描述】：

我无法弄清楚为什么我的淡出不适用于我正在组合的叠加层。 我想用css实现大部分。我想使用 jQuery 的唯一一次是在延迟后切换显示：块类。

我需要做什么才能让叠加层的淡出在短暂延迟后正常工作？

我还包括一个 CodePen。 https://codepen.io/ChidoYo/pen/jOmdZLK

html

    <div class="container border rounded mt-5">
      <div class="row">
        <div class="col pb-3">
          <h1>Opacity Fade In/Out</h1>
          <button class="btn btn-primary" id="toggle">Toggle</button>
        </div>
      </div>
    </div>

    <div class="superposer d-none"></div>
    <div class="drawer">
      <div class="row mx-0 mt-4">
        <div class="col">
          <h3>Drawer</h3>
        </div>
      </div>
    </div>

CSS

.superposer 
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.52);
      opacity: 0;
      // transition: opacity 0.2s ease-in-out 2s;
      animation: superposerFadeOut 1s ease-in-out 2s;

      &.active 
        opacity: 1;
        // transition: opacity 1s ease-in-out;
        animation: superposerFadeIn 0.5s ease-in-out;
      
    

    @keyframes superposerFadeOut 
      0% 
        opacity: 1;
      
      100% 
        opacity: 0;
      
    

    @keyframes superposerFadeIn 
      0% 
        opacity: 0;
      
      100% 
        opacity: 1;
      
    

    .drawer 
      position: fixed;
      top: 0;
      bottom: 0;
      transition: right 0.25s ease-in-out;
      right: -350px;
      background-color: white;
      border-left: 1px solid #999;
      width: 350px;

      &.active 
        transition: right 0.25s ease-in-out 0.25s;
        right: 0;
      
    

jQuery

$(() => 
      $('#toggle').on('click', () => 
        $('.superposer').toggleClass('active d-none');
        $('.drawer').addClass('active');
      );

      $('.superposer').on('click', () => 
        $('.superposer').removeClass('active');
        $('.drawer').removeClass('active');

        setTimeout(() => 
          $('.superposer').addClass('d-none')
        , 1000)
      )
    )

【参考方案1】：

您的代码存在一些小问题。你的.superposer 没有淡出的主要原因是因为你在display: none 不活动时使用它。 display 不能动画/过渡，因为这两个属性都需要一个可以计算的值范围。 display 具有布尔值。它要么打开，要么关闭。中间什么都没有。

所以只要删除.superposer 中的display 行，FadeOut 动画就会开始工作。但是，这不会是您期望的行为，因为您还需要对 JS 进行一些更改。

我已经通过这些更改制作了一个代码笔。您可以在这里查看：https://codepen.io/OSquiddy/pen/ExmrMzX

我也去掉了动画，因为你想要的可以很容易地用过渡来完成。

【讨论】：

谢谢。我一直在努力避免完全使用 JS。不幸的是，我需要将叠加器（这是覆盖的另一个名称）更改为 display: none 由于屏幕阅读器而隐藏时。我的方法必须是使用非常少量的 JS 来使用超时来切换显示块/无。

为此，我建议使用 transitionend eventListener 而不是计时器。最好不要依赖计时器。您可以在 superposer 上监听过渡何时结束，检查它的不透明度值是否为 0，然后将显示更改为无

绝妙的建议！我会调查的。

这是我的代码笔和解决方案：codepen.io/ChidoYo/pen/jOmdZLK