В моем приложении у меня есть компонент, который состоит из div с фоновым изображением и другого div, вложенного в него. Как только компонент наведен, вложенный div изменит свою непрозрачность до 85%, и я хочу, чтобы это произошло с переходом. Я кодировал его, и он работал нормально при запуске моего приложения в режиме разработки, однако, как только мое приложение было запущено в производство, эта анимация полностью игнорируется.

Также я хочу упомянуть, что для этого проекта я использую React v16.12, последнюю версию Bootstrap, и мое приложение было создано с использованием Create React App.

Я использовал инструменты Chrome Dev, чтобы проверить, происходило ли это вообще, и это действительно показывает, но визуальный эффект не отображается на экране.

Кроме того, в моем приложении есть другие анимации, которые работают нормально.

Это код моего компонента

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

И это 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, о которой я не знаю, однако я не смог найти ни информации об этом, ни каких-либо подобных случаев.