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

【问题标题】：How to make background's color transition on a react component?如何在反应组件上进行背景颜色过渡？
【发布时间】：2018-01-23 00:04:09
【问题描述】：

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

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

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

我试过这个但是不行，当我添加消息时，背景颜色仍然是蓝色。

我正在使用结合 SASS/Compass 的 reactJS

&lt;div className="successfully-saved"&gt;&lt;Message /&gt;&lt;/div&gt;

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

感谢您的帮助

【问题讨论】：

保存成功的是帖子还是主页？
所以基本上你想显示消息，一旦保存帖子就会淡出（隐藏）消息。对吧？
@hunzaboy 只有帖子组件
@Dev 实际上我设置了我的应用程序，以便在提交表单后，组件直接附加到页面中而无需任何刷新，但我需要制作动画淡出以让用户知道添加了一些新鲜内容。
@Johndoe，我已经添加了答案。

标签： css reactjs sass css-animations compass-sass

【解决方案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;
}

&lt;div id="msg" class="successfully-saved"&gt;&lt;/div&gt;

【讨论】：

嘿！感谢您。我正在寻找这样的东西。但是我需要只为背景颜色操作不透明度过渡。因为通过使用这个例子，我的整个组件消失了。我怎样才能解决这个问题？谢谢。
您不想隐藏消息？我已经更新了答案。
非常感谢！完全按预期工作。我不能希望有更好的结果。谢谢你的帮助。解决了！