Question

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

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

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

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

我正在使用reactJS和SASS / Compass

＆＃13;

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

＆＃13;

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

＆＃13;

感谢您的帮助

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>

如何在反应组件上进行背景颜色转换？

1 个答案: