javascript - 在 React 中为子元素设置动画的正确方法是什么？

Question

在我的应用程序中，我有一个组件，它由一个带有背景图像的 div 和另一个嵌套在其中的 div 组成。一旦组件悬停，嵌套的 div 就会将其不透明度更改为 85%，我希望通过转换发生这种情况。我对其进行了编码，并且在开发模式下运行我的应用程序时它运行良好，但是，一旦我的应用程序投入生产，这个动画就会被完全忽略。

另外我想提一下，对于这个项目，我使用的是 React v16.12，最新版本的 Bootstrap 和我的应用程序是使用 Create React App 创建的。

我使用 chrome 开发工具检查它是否正在发生，它确实显示在那里，但屏幕上没有显示视觉效果。

此外，我的应用程序中还有一些其他动画效果很好。

这是我的组件的代码

const ProductShowcase = ({ img, title, link }) => {
    return (
        <div className="col-12 col-md-4 mb-4">
            <Link to={link}>
                <div className="fade-img" style={{backgroundImage: `url(${img})`}}>
                    <div className="superposed d-flex text-center align-items-center">
                        <p className="lead showcase-text">{title}</p>
                        <div className="overlay"></div>
                    </div>
                </div>
            </Link>
        </div>
    );
};

这是我应用的 CSS

.fade-img{
    height: 300px;
    border-radius: 1.8%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px gray;
    cursor: pointer;
}

.superposed{
    height: inherit;
    position: relative;
}

.overlay{
    height: inherit;
    width: 100%;
    background-color: #2c3554;
    opacity: 0%;
    transition: opacity .25s;
    border-radius: inherit;
    position: absolute;
}

.fade-img p{
    color: white;
    position: absolute;
    z-index: 150;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-shadow: 1px 1px grey;
}

.fade-img:hover .superposed .overlay{
    opacity: 85%;
}

.showcase-text{
    font-size: 1.8rem;
}

@media screen and (max-width: 767px) { 
    .fade-img{
        height: 50px;
    }

    .showcase-text{
        font-size: 1.4rem;
    }
}

我知道这可能是由我不知道的 React 进行的一些优化引起的，但是我无法找到有关它的任何信息或任何类似情况。

标签： javascriptcssreactjstwitter-bootstrapwebpack