Question

在我的应用程序中，我有一个组件，该组件由一个带有背景图像的div和一个嵌套在其中的div组成。组件悬停后，嵌套的div会将其不透明度更改为85％，我希望在过渡时实现。我对其进行了编码，并且在以开发模式运行我的应用程序时，它可以正常工作，但是，一旦我的应用程序投入生产，该动画将被完全忽略。

我还要提及的是，对于该项目，我正在使用最新版本的Bootstrap React v16.12，并且我的应用程序是使用Create React App创建的。

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

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

这是我组件的代码

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的一些优化引起的，但是我找不到关于它的任何信息，也没有类似的情况。

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

0 个答案: