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

Question

我无法弄清楚为什么我的淡出不适用于我正在组合的叠加层。 我想用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)
      })
    })

Answer 1

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

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

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

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