如何在反應組件上製作背景的顏色轉換？

我只是想在頁面中發佈新消息時設置背景淡出動畫。如何在反應組件上製作背景的顏色轉換？

我只是想要改變背景。從藍色到不透明度0.

只是在頁面中實時添加新帖子時的基本動畫。

我試過這個，但它不起作用，當我添加消息時，背景色仍然是藍色。

我使用加上SASS /北斗

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

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

感謝reactJS幫助

來源

2017-08-15 John doe

是在成功保存的職位或主頁？ – Aslam

所以基本上你想要顯示的消息，一旦保存後保存淡出（隱藏）消息。右？ – Dev

@hunzaboy只有郵件組件 –

假設，你想淡出/隱藏消息，當一個新的職位是成功添加。你可以改變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>

來源

2017-08-15 05:21:02 Dev

嘿！謝謝。我正在尋找這樣的事情。但是，我需要不透明度過渡只能用於背景顏色。因爲通過使用這個例子，我的整個組件都消失了。我怎樣才能解決這個問題？謝謝。 –

你不想隱藏信息？我已經更新了答案。 – Dev

非常感謝！完全按預期工作。我無法期待更好的結果。感謝您的幫助。解決了！ –

如何在反應組件上製作背景的顏色轉換？

回答

相關問題