不透明度淡入和淡出问题 - 仅淡出失败 CSS

Question

我不明白为什么我的淡出效果不适用于我放在一起的叠加层。我想用 css 来实现其中的大部分。我唯一想使用 jQuery 的时间是切换显示时：延迟后块 class。

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

我还包括一个 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 不能是 animated/transitioned，因为这两个属性都需要一个可以计算的值范围。 display 具有布尔值。它要么打开，要么关闭。两者之间没有任何区别。

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

我用这些更改做了一个代码笔。您可以在这里查看：https://codepen.io/OSquiddy/pen/ExmrMzX

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

不透明度淡入和淡出问题 - 仅淡出失败 CSS

Opacity FadeIn and FadeOut Problems - FadeOut Failing CSS Only

css

jquery

css-transitions

twitter-bootstrap