我想說的是：
其實基礎的多個 DOM 的動畫，跟一個差不多
多個的就是專業的部分，我不清楚

上一篇中已經可以控制一個 DOM 元素的動畫效果
而想控制多個動畫 react-transition-group 這個套件也是可以做到的

首先在 Massage.js 引入套件

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

再來就是使用 TransitionGroup 組件來控制動畫
把原先的 render() 修改為

render() {
    return (
        <>
            <div>
                <input
                    value={this.state.newServiceName}
                    onChange={this.inputChange}
                />
                <button
                    onClick={this.addService}
                >
                    增加服務
                </button>
            </div>
            <ul>
                <TransitionGroup>
                    {
                        this.state.massageServiceList.map((massageService, index) => {
                            return (
                                <CSSTransition
                                    timeout={2000}
                                    classNames='boss-text'
                                    unmountOnExit
                                    appear={true}
                                    key={index+massageService}
                                >
                                    <MassageService
                                        key={index + massageService}
                                        massageService={massageService}
                                        index={index}
                                        deleteService={this.deleteService}
                                    />
                                </CSSTransition>

                            )
                        })
                    }
                </TransitionGroup>
            </ul>
            <Boss></Boss>
        </>
    )
}

可以看到我們只是用一個 TransitionGroup 組件包起原本的內容
然後對內容全部使用上一篇的 CSSTransition 組件包起來
於是在每一個 <li></li> 內容中就可以使用上一篇做過的那些動畫效果了！

這篇寫得很粗淺，因為我也只是初學的程度 React 動畫還能做出很多酷炫的效果
完全可以單獨分出來一個職缺，我甚至聽過有前端就是喜歡做動畫的
想學習更多的話可以看看文件的內容，或是參考別人的作品