鍍金池/ 問答/HTML/ react中怎么做動畫效果，簡單的，彈出框改變opacity逐漸顯示

react中怎么做動畫效果，簡單的，彈出框改變opacity逐漸顯示

背景：

<div 
    className="company-detail"
    style={{display:this.state.cd_show ? "block" : "none"}}
>
    ...
</div>

這是個彈窗
之前是改變state控制display，如上； 現(xiàn)在 1.是覺得太生硬 2.是點擊不同nodes時，彈窗中的內(nèi)容去調(diào)接口拿，用戶能看到內(nèi)容的變化過程。
問題：
綜上 ，現(xiàn)在想在彈出窗顯示的時候使它過渡顯示(opacity從0變?yōu)?),隱藏的時候可以不用管，直接display:none就行。

回答
編輯回答
青瓷

簡單方法有2：

  1. 利用Animation Add-Ons，官方文檔。
  2. 利用CSS3屬性：transition:all .2s ease;（推薦，簡單粗暴）
className="this.state.cd_show ? 'comp show' : 'comp'"
.comp {
    opacity: 0;
    transition:all .2s ease;
    &.show {
        opacity: 1;
    }
}
2018年9月5日 08:02