我想說的是：
動畫好酷炫耶，以前完全沒用過就跑來寫後端
react-transition-group 真的很厲害
看完之後...我還是不會想寫前端耶

用 transition 只能作一些最簡單的動畫，如果稍微複雜一點就做不出來了
這時候就可以用CSS3中的 keyframes

首現重寫 style.css

.show{ animation:show-item 2s ease-in forwards; }
.hide{ animation:hide-item 2s ease-in forwards; }

@keyframes hide-item{
    0% {
        opacity:1;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:0;
        color: green;
    }
}
@keyframes show-item{
    0% {
        opacity:0;
        color:yellow;
    }
    50%{
        opacity: 0.5 ;
        color:red;
    }
    100%{
        opacity:1;
        color: green;
    }
}

使用動畫的關鍵詞是 animation，然後加上定義好的動畫名稱
forwards 代表不循環播放，在上面的設定中我們定義的是：持續時間2秒鐘，效果由慢到快

這是在原生的 CSS3 中支援的部分
至於動畫這種必不可少的東西， React 中當然也有人家寫好的套件
就叫做 react-transition-group
先來看看版本庫
安裝一樣非常簡單

npm install react-transition-group --save

安裝好後，先去來看一下官方文件
他是有著三個核心組件

• Transition
• CSSTransition
• TransitionGroup

使用CSSTransition

第一步當然是 import 進剛剛的 Boss.js 中

import { CSSTransition } from 'react-transition-group'

引入後就可以直接使用了，使用的方法就和自訂的組件一樣
直接寫<CSSTransition>，而且不再需要管理className了
這部分由CSSTransition進行管理

修改上節課寫的Boss.js文件裡的render區域

render() {
    return (
        <>
            <CSSTransition
                in={this.state.isShow}   // 用於判斷是否出現的狀態
                timeout={2000}           // 動畫持續時間
                classNames="boss-text"   // 防止重複，可以理解成 namespace
            >
                <div>BOSS - 風魚</div>
            </CSSTransition>
            <div>
                <button onClick={this.toToggle}>召喚「風魚」 </button>
            </div>
        </>
    );
}

現在要來修改 style.css 套用新的內容
再看看官方文件說明可以知道，有幾個屬性是可以操作的

namespace-enter: 進入前的樣式或是稱作初始值
namespace-enter-active:進入動畫直到完成時之前的 CSS 樣式;
namespace-enter-done:進入完成時的 CSS 樣式;
namespace-exit:退出前的 CSS 樣式;
namespace-exit-active:退出動畫知道完成時之前的的 CSS 樣式。
namespace-exit-done:退出完成時的 CSS 樣式。

了結之後就來修改樣式

.boss-text-enter{
    opacity: 0;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;

}
.boss-text-enter-done{
    opacity: 1;
}
.boss-text-exit{
    opacity: 1;
}
.boss-text-exit-active{
    opacity: 0;
    transition: opacity 2000ms;

}
.boss-text-exit-done{
    opacity: 0;
}

這時候你的動畫樣式就正常了
如果打開開發者工具，可以看到指定的區塊 class name 會隨著操作自己變化成對應的名稱
我們再也不用自己管理 className 了
而是完全交給了 react-transition-group 來操作

接著要講一個很厲害了，以前做不到的

unmountOnExit

給 <CSSTransition> 加上 unmountOnExit
加上這個的意思是在元素退出時，自動把 DOM 也刪除
這是以前用CSS動畫沒辦法做到的！整個 React 機器動得很厲害
一整個前端產業鍊都發大財了
更深入的內容可以在官方文件裡挖寶
像是下一篇就來玩玩看 TransitionGroup
剛剛只操作了一個 DOM 元素
藉由 TransitionGroup 可以一次控制多個 DOM 的動畫內容