iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

被 React react 的後端工程師系列 第 29

[DAY29] 多 DOM 的動畫之我等了這篇 29 天之我完全不介意

我想說的是:
其實基礎的多個 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 動畫還能做出很多酷炫的效果
完全可以單獨分出來一個職缺,我甚至聽過有前端就是喜歡做動畫的
想學習更多的話可以看看文件的內容,或是參考別人的作品


上一篇
[DAY28] React 動畫動得非常厲害
下一篇
[DAY30] 被 React react 的後端工程師 - 後記
系列文
被 React react 的後端工程師30

尚未有邦友留言

立即登入留言