好看的小说完本推荐,玄幻小说排行榜,武道至尊帝临小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

實(shí)現(xiàn)一個(gè)帶有動(dòng)效的React彈窗組件

我們?cè)趯懸恍?UI 組件時(shí)，若不考慮動(dòng)效，就很容易實(shí)現(xiàn)，主要就是有無(wú)的切換（類似于 Vue 中的 v-if 屬性）或者可見性的切換（類似于 Vue 中的 v-show 屬性）。

成都創(chuàng)新互聯(lián)公司主營(yíng)崇州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開發(fā),崇州h5小程序開發(fā)搭建,崇州網(wǎng)站營(yíng)銷推廣歡迎崇州等地區(qū)企業(yè)咨詢

1. 沒有動(dòng)效的彈窗

在 React 中，可以這樣來(lái)實(shí)現(xiàn)：

 
 
 
 
  
  
  
  interface ModalProps {
  
  
  
    open: boolean;
  
  
  
    onClose?: () => void;
  
  
  
    children?: any;
  
  
  
  }
  
  
  
  const Modal = ({open. onClose, children}: ModalProps) => {
  
  
  
    if (!open) {
  
  
  
      return null;
  
  
  
    }
  
  
  
    return createPortal(
  
  
  
      {children}

, document.body);

};

使用方式：

 
 
 
 
  
  
  
  const App = () => {
  
  
  
    const [open, setOpen] = useState(false);
  
  
  
  
  
  
  
    return (
  
  
  
      
  
  
  
         setOpen(true)}>show modal
  
  
  
         setOpen(false)}>
  
  
  
          modal content

);

};

我們?cè)谶@里就是使用 open 屬性來(lái)控制展示還是不展示，但完全沒有漸變的效果。

若我們想實(shí)現(xiàn) fade, zoom 等動(dòng)畫效果，還需要對(duì)此進(jìn)行改造。

2. 自己動(dòng)手實(shí)現(xiàn)有動(dòng)效的彈窗

很多同學(xué)在自己實(shí)現(xiàn)動(dòng)效時(shí)，經(jīng)常是展示的時(shí)候有動(dòng)效，關(guān)閉的時(shí)候沒有動(dòng)效。都是動(dòng)效的時(shí)機(jī)沒有控制好。這里我們先自己來(lái)實(shí)現(xiàn)一下動(dòng)效的流轉(zhuǎn)。

剛開始我實(shí)現(xiàn)的時(shí)候，動(dòng)效只有開始狀態(tài)和結(jié)束狀態(tài)，需要很多的變量和邏輯來(lái)控制這個(gè)動(dòng)效。

后來(lái)我參考了 react-transition-group 組件的實(shí)現(xiàn)，他是將動(dòng)效拆分成了幾個(gè)部分，每個(gè)部分分別進(jìn)行控制。

展開動(dòng)效的順序：enter -> enter-active -> enter-done；
關(guān)閉動(dòng)效的順序：exit -> exit-active -> exit-done；

動(dòng)效過程在 enter-active 和 exit-active 的過程中。

我們?cè)偻ㄟ^一個(gè)變量 active 來(lái)控制是關(guān)閉動(dòng)效是否已執(zhí)行關(guān)閉，參數(shù) open 只控制是執(zhí)行展開動(dòng)效還是關(guān)閉動(dòng)效。

當(dāng) open 和 active 都為 false 時(shí)，才銷毀彈窗。

 
 
 
 
  
  
  
  const Modal = ({ open, children, onClose }) => {
  
  
  
    const [active, setActive] = useState(false); // 彈窗的存在周期
  
  
  
  
  
  
  
    if (!open && !active) {
  
  
  
      return null;
  
  
  
    }
  
  
  
  
  
  
  
    return ReactDOM.createPortal(
  
  
  
      
  
  
  
        {children}

document.body,

);

};

這里我們接著添加動(dòng)效過程的變化：

 
 
 
 
  
  
  
  const [aniClassName, setAniClassName] = useState(''); // 動(dòng)效的class
  
  
  
  
  
  
  
  // transition執(zhí)行完畢的監(jiān)聽函數(shù)
  
  
  
  const onTransitionEnd = () => {
  
  
  
    // 當(dāng)open為rue時(shí)，則結(jié)束狀態(tài)為'enter-done'
  
  
  
    // 當(dāng)open未false時(shí)，則結(jié)束狀態(tài)為'exit-done'
  
  
  
    setAniClassName(open ? 'enter-done' : 'exit-done');
  
  
  
  
  
  
  
    // 若open為false，則動(dòng)畫結(jié)束時(shí)，彈窗的生命周期結(jié)束
  
  
  
    if (!open) {
  
  
  
      setActive(false);
  
  
  
    }
  
  
  
  };
  
  
  
  
  
  
  
  useEffect(() => {
  
  
  
    if (open) {
  
  
  
      setActive(true);
  
  
  
      setAniClassName('enter');
  
  
  
      // setTimeout用來(lái)切換class，讓transition動(dòng)起來(lái)
  
  
  
      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(''); // 動(dòng)效的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}

新聞中心

1. 沒有動(dòng)效的彈窗

2. 自己動(dòng)手實(shí)現(xiàn)有動(dòng)效的彈窗

3. react-transition-group

4. 總結(jié)

其他資訊