Question

我有这个叠加层组件

Overlay.js

import React from 'react';
import './Overlay.css'

const Overlay = props => <div
    className="overlay"
    style={{
        display: props.show ? 'block' : 'none',
    }}></div>;

export default Overlay;

Overlay.css

.overlay {
    position: absolute;
    top:0;
    left: 0;
    background: black;
    height: 100%;
    width: 100%;
    z-index: 9999;
    opacity: 0.7;
    transition: opacity 2s ease-in;
}

我想要的是每当我将其show属性设置为true时，叠加层就会淡入（从不透明度0到0.7）。我现在尝试的方法不起作用（在CSS文件中添加过渡）。谁能告诉我我哪里出问题了？

先谢谢了。

Answer 1

您的方向正确，唯一的问题是您修改了display属性而不是opacity。

通过不透明度属性将transition应用于元素时-元素应显示为opacity: 0，然后将不透明度更改为opacity: 0.7。在这种情况下，您会看到变暗的效果。

以下是演示此方案的代码沙箱。 https://codesandbox.io/s/wnrokmvw55

Answer 2

问题是您不是在更改不透明度值，而是在切换元素的显示。

我的建议是您使用CSS动画。

@keyframes custom-fadein {
  0%   {opacity: 0;}
  100% {opacity: 0.7;}
}

.overlay {
    position: absolute;
    top:0;
    left: 0;
    background: black;
    height: 100%;
    width: 100%;
    z-index: 9999;
    animation-name: custom-fadein;
    animation-duration: 2s;
}

现在，无论何时将显示属性从无更改为块，它都会显示de div对象并开始动画。

希望有帮助！

添加

要处理淡出效果，您也可以执行以下操作

@keyframes custom-fadein {
  0%   {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes custom-fadeout {
    0% {
        opacity: 0.7;
    }
    100%{
        opacity: 0;
    }
}

.overlay {
    position: absolute;
    top:0;
    left: 0;
    background: black;
    height: 100%;
    width: 100%;
    z-index: 9999;
    display: none;
    opacity: 0;
}

.shown{
    opacity: 0.7;
    display: block;
    animation-name: custom-fadein;
    animation-duration: 2s;
}

.hidden{
    display: block;
    animation-name: custom-fadeout;
    animation-duration: 2s;
}

您可以在显示或隐藏的类之间交替显示，而不是与元素的显示状态交替显示。

使深色叠加淡入（HTML / CSS / React）

2 个答案: