Question

我的网站上有一个背景幕，可以随时打开。模态，移动导航等。

我希望让背景的不透明度消失，但是当从背景中移除--open类时，我无法正常转换。

我已经经历了几次迭代，所以任何有关如何使其工作并且更好的css的想法表示赞赏。

这是一个演示，演示了--open应用于背景时出现的缓解效果，但在删除后无效。

为了期货，这里是代码：

.backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -9999999999;
    opacity: 0;
    text-align: center;

    transition: opacity 0.3s ease-in;

}

.backdrop--open {
    opacity: 0.75;
    z-index: 2;
    background: #000;

    transition: opacity 0.4s ease-out;
}

Answer 1

问题是您没有在初始.backdrop状态设置背景，背景设置在元素.backdrop--open上。

由于您只是转换opacity属性，因此当您删除.backdrop--open类时，转换不会发生。因此，您需要将后台移至初始.backdrop状态，以便在删除类时进行转换。

Updated Example

.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  text-align: center;
  background: #000;
  transition: opacity 0.3s ease-in;
}

.backdrop--open {
  opacity: 0.75;
  z-index: 2;
  transition: opacity 0.4s ease-out;
}

作为替代方案，除了background属性之外，您还可以保留初始代码并仅转换opacity属性（无需更改背景设置的位置）。

请注意，z-index属性可以转换，因此根据您尝试实现的目标，您可能只希望定位这两个属性而不是使用all。

Updated Example

.backdrop {
  /* ... */
  transition: background 0.3s ease-in, opacity 0.3s ease-in;
}

.backdrop--open {
  /* ... */
  background: #000;
  transition: background 0.4s ease-out, opacity 0.4s ease-out;
}

删除类时，不将背景不透明度转换为0

1 个答案: