如何在反应组件上进行背景颜色过渡？

Question

我只想在页面中发布新消息时设置背景淡出动画。

我只是想改变背景。从蓝色到不透明度0。

只是在页面中实时添加新帖子时的基本动画。

我已经尝试过，但它不起作用，当我添加消息时，背景颜色仍然是蓝色。

我正在使用reactJS和SASS/Compass

<div className="successfully-saved"><Message /></div>

.successfully-saved{
  background-color:blue;
  @include transition(opacity, 1s ease-out);
}

感谢您的帮助

Answer 1

假设，当成功添加新帖子时，您想要淡出/隐藏消息。您可以更改 div 的样式并将不透明度设置为 0。类似这样的。希望这可以帮助。

let msgEl = document.getElementById('msg');

//To add post successfully, I am just using setTimeout. It may vary in your case.
setTimeout(function() {
   msgEl.innerHTML = "Post Successfully Added";
   msgEl.style.backgroundColor = 'transparent';
}, 1000)

.successfully-saved{
    background-color: blue;
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;
}

<div id="msg" class="successfully-saved"></div>