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

Question

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

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

页面中实时添加新post时的基本动画。

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

我正在使用 reactJS 和 SASS/Compass

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

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

感谢您的帮助

Answer 1

Assuming, you want to fadeout/hide message, when a new post is successfully added. You can change the style of the div and set opacity to 0. Something like this. Hope this helps.

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>

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

How to make background's color transition on a react component?

css

sass

css-animations

compass-sass

reactjs