css - How to make background's color transition on a react component? -
i want set background fadeout animation when new message posted in page.
i want background change. blue opacity 0.
just basic animation when new post added in page in real time.
i've tried doesn't work, when add message, background color remains blue.
i using reactjs coupled sass/compass
<div classname="successfully-saved"><message /></div>
.successfully-saved{ background-color:blue; @include transition(opacity, 1s ease-out); }
thanks helping
assuming, want fadeout/hide message, when new post added. can change style of div , set opacity 0. this. hope helps.
let msgel = document.getelementbyid('msg'); //to add post successfully, using settimeout. may vary in case. settimeout(function() { msgel.innerhtml = "post added"; msgel.style.backgroundcolor = 'transparent'; }, 1000)
.successfully-saved{ background-color: blue; -webkit-transition: background-color 2s; /* safari 3.1 6.0 */ transition: background-color 2s; }
<div id="msg" class="successfully-saved"></div>
Comments
Post a Comment