近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。
[ Repo ]：https://github.com/andy922200/practice-storybook-react
內容
參數
isOpen – 抽屜是否顯示
placement – 抽屜的方向
animationDuration – 定義動畫完成的時間
children – 抽屜要顯示的東西
onClose – 觸發抽屜關閉
概念
1. 從外部控制狀態，點擊後就開啟。
2. 當點擊遮罩的時候，要觸發 onClose 來關閉抽屜。同時搭配 keyframes 的動畫效果，將 opacity 的屬性做改變
3. 開關時，要有動畫 (利用 keyframes 的變化， 由 0% -> 100% 或 100% -> 0% )
例如 rightStyle 就是改變 right 的屬性
4. 當動畫完成後，將整個元件消失掉
5. 遮罩要設定 position:fixed，以免當被遮住的內容可以 scroll 時，遮罩不會跟著動
6. animation-fill-mode 設定為 forwards，可以讓樣式停留在結束時的狀態
程式碼
相關文章
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 30 – 佈署發佈
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化，便
★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化，便
