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

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

我还想提到，对于这个项目，我使用的是React v16.12，最新版本的引导和我的应用程序是使用CreateReact应用程序创建的

我使用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>
    );
};

---

我知道这可能是由React进行的一些优化造成的，但我不知道，但是我没有找到任何关于它的信息，也没有找到任何类似的案例。

React-dev vs.prod-build不应该对动画产生影响，动画看起来很好。顺便问一句，在生产版本中运行的其他东西可以解释这一点吗？您是否正在缩小或运行任何css预处理器？类名被弄乱了吗？当您使用检查元素时，是否确实正确应用了这些类devtools@RedMercury我对React比较陌生，所以我仍然在使用CreateReact应用程序。我知道它在Webpack和Babel上做了很多事情来运行应用程序。但是我不确定这些是什么。React dev vs.prod build不应该对动画产生影响，这看起来很好。顺便问一下，在生产版本中运行的其他东西可以解释这一点吗？您是否正在缩小或运行任何css预处理器？类名被弄乱了吗？当您使用检查元素时，是否确实正确应用了这些类devtools@RedMercury我对React比较陌生，所以我仍然在使用CreateReact应用程序。我知道它在Webpack和Babel上做了很多事情来运行应用程序。但我不确定这些东西是什么。

.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;
    }
}