建站
咨詢
售后
建站咨詢
新聞中心
本文小編為大家詳細介紹“React中如何實現(xiàn)一個動效彈窗組件”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“React中如何實現(xiàn)一個動效彈窗組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
湖濱ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
1. 沒有動效的彈窗
在 React 中，可以這樣來實現(xiàn)：
interface ModalProps {
open: boolean;
onClose?: () => void;
children?: any;
}
const Modal = ({open. onClose, children}: ModalProps) => {
if (!open) {
return null;
}
return createPortal(
{children}
x 使用方式：
const App = () => {
const [open, setOpen] = useState(false);
return (
setOpen(true)}>show modal
setOpen(false)}>
modal content
2. 自己動手實現(xiàn)有動效的彈窗
很多同學在自己實現(xiàn)動效時，經(jīng)常是展示的時候有動效，關(guān)閉的時候沒有動效。都是動效的時機沒有控制好。這里我們先自己來實現(xiàn)一下動效的流轉(zhuǎn)。
剛開始我實現(xiàn)的時候，動效只有開始狀態(tài)和結(jié)束狀態(tài)，需要很多的變量和邏輯來控制這個動效。
后來我參考了react-transition-group組件的實現(xiàn)，他是將動效拆分成了幾個部分，每個部分分別進行控制。
展開動效的順序：enter -> enter-active -> enter-done；
關(guān)閉動效的順序：exit -> exit-active -> exit-done；
動效過程在enter-active和exit-active的過程中。
我們再通過一個變量 active 來控制是關(guān)閉動效是否已執(zhí)行關(guān)閉，參數(shù) open 只控制是執(zhí)行展開動效還是關(guān)閉動效。
當 open 和 active 都為 false 時，才銷毀彈窗。
const Modal = ({ open, children, onClose }) => {
const [active, setActive] = useState(false); // 彈窗的存在周期
if (!open && !active) {
return null;
}
return ReactDOM.createPortal(
{children} 這里我們接著添加動效過程的變化：
const [aniClassName, setAniClassName] = useState(''); // 動效的class
// transition執(zhí)行完畢的監(jiān)聽函數(shù)
const onTransitionEnd = () => {
// 當open為rue時，則結(jié)束狀態(tài)為'enter-done'
// 當open未false時，則結(jié)束狀態(tài)為'exit-done'
setAniClassName(open ? 'enter-done' : 'exit-done');
// 若open為false，則動畫結(jié)束時，彈窗的生命周期結(jié)束
if (!open) {
setActive(false);
}
};
useEffect(() => {
if (open) {
setActive(true);
setAniClassName('enter');
// setTimeout用來切換class，讓transition動起來
setTimeout(() => {
setAniClassName('enter-active');
});
} else {
setAniClassName('exit');
setTimeout(() => {
setAniClassName('exit-active');
});
}
}, [open]);Modal 組件完整的代碼如下：
const Modal = ({ open, children, onClose }) => {
const [active, setActive] = useState(false); // 彈窗的存在周期
const [aniClassName, setAniClassName] = useState(''); // 動效的class
const onTransitionEnd = () => {
setAniClassName(open ? 'enter-done' : 'exit-done');
if (!open) {
setActive(false);
}
};
useEffect(() => {
if (open) {
setActive(true);
setAniClassName('enter');
setTimeout(() => {
setAniClassName('enter-active');
});
} else {
setAniClassName('exit');
setTimeout(() => {
setAniClassName('exit-active');
});
}
}, [open]);
if (!open && !active) {
return null;
}
return ReactDOM.createPortal(
{children} 
