本文小編為大家詳細(xì)介紹“React中如何實(shí)現(xiàn)一個動效彈窗組件”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“React中如何實(shí)現(xiàn)一個動效彈窗組件”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

湖濱ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

1. 沒有動效的彈窗

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

interface ModalProps {
  open: boolean;
  onClose?: () => void;
  children?: any;
}
const Modal = ({open. onClose, children}: ModalProps) => {
  if (!open) {
    return null;
  }
  return createPortal(<div>
    <div classname="modal-content">{children}</div>
    <div classname="modal-close-btn" onclick="{onClose}">x</div>
  </div>, document.body);
};

使用方式：

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div classname="app">
      <button onclick="{()" ==""> setOpen(true)}>show modal</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        modal content
      </modal>
    </div>
  );
};

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

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

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

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

1. 展開動效的順序：enter -> enter-active -> enter-done；

2. 關(guān)閉動效的順序：exit -> exit-active -> exit-done；

動效過程在enter-active和exit-active的過程中。

我們再通過一個變量 active 來控制是關(guān)閉動效是否已執(zhí)行關(guān)閉，參數(shù) open 只控制是執(zhí)行展開動效還是關(guān)閉動效。

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

const Modal = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // 彈窗的存在周期

  if (!open && !active) {
    return null;
  }

  return ReactDOM.createPortal(
    <div classname="modal">
      <div classname="modal-content">{children}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    document.body,
  );
};

這里我們接著添加動效過程的變化：

const [aniClassName, setAniClassName] = useState(''); // 動效的class

// transition執(zhí)行完畢的監(jiān)聽函數(shù)
const onTransitionEnd = () => {
  // 當(dāng)open為rue時，則結(jié)束狀態(tài)為'enter-done'
  // 當(dāng)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(
    <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
      <div classname="modal-content">{children}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    document.body,
  );
};

動效的流轉(zhuǎn)過程已經(jīng)實(shí)現(xiàn)了，樣式也要一起寫上。比如我們要實(shí)現(xiàn)漸隱漸現(xiàn)的 fade 效果：

.enter {
  opacity: 0;
}
.enter-active {
  transition: opacity 200ms ease-in-out;
  opacity: 1;
}
.enter-done {
  opacity: 1;
}
.exit {
  opacity: 1;
}
.exit-active {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.exit-done {
  opacity: 0;
}

如果是要實(shí)現(xiàn)放大縮小的 zoom 效果，修改這幾個 class 就行。

一個帶有動效的彈窗就已經(jīng)實(shí)現(xiàn)了。

使用方式：

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div classname="app">
      <button onclick="{()" ==""> setOpen(true)}>show modal</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        modal content
      </modal>
    </div>
  );
};

3. react-transition-group

我們在實(shí)現(xiàn)動效的思路上借鑒了 react-transition-group 中的CSSTransition組件。CSSTransition已經(jīng)幫我封裝好了動效展開和關(guān)閉的過程，我們在實(shí)現(xiàn)彈窗時，可以直接使用該組件。

這里有一個重要的屬性：unmountOnExit，表示在動效結(jié)束后，卸載該組件。

const Modal = ({ open, onClose }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // in屬性為true/false，true為展開動效，false為關(guān)閉動效
  return createPortal(
    <csstransition in="{open}" timeout="{200}" unmountonexit="">
      <div classname="modal">
        <div classname="modal-content">{children}</div>
        <div classname="modal-close-btn" onclick="{onClose}">
          x
        </div>
      </div>
    </csstransition>,
    document.body,
  );
};

在使用 CSSTransition 組件后，Modal 的動效就方便多了。

讀到這里，這篇“React中如何實(shí)現(xiàn)一個動效彈窗組件”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：React中如何實(shí)現(xiàn)一個動效彈窗組件
文章路徑：http://chinadenli.net/article40/iigeeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、靜態(tài)網(wǎng)站、網(wǎng)站收錄、App開發(fā)、企業(yè)建站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)