欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React實(shí)現(xiàn)動效彈窗組件

 更新時間:2021年06月21日 16:54:25   作者:蚊子博客  
最近在使用react開發(fā)項(xiàng)目,遇到這樣一個需求實(shí)現(xiàn)一個帶有動效的 React 彈窗組件,如果不考慮動效,很容易實(shí)現(xiàn),接下來小編通過本文給大家介紹React實(shí)現(xiàn)動效彈窗組件的實(shí)現(xiàn)代碼,一起看看吧

我們在寫一些 UI 組件時,若不考慮動效,就很容易實(shí)現(xiàn),主要就是有無的切換(類似于 Vue 中的 v-if 屬性)或者可見性的切換(類似于 Vue 中的 v-show 屬性)。

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>
  );
};

我們在這里就是使用open屬性來控制展示還是不展示,但完全沒有漸變的效果。

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

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-activeexit-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>
  );
};

點(diǎn)擊鏈接自己實(shí)現(xiàn)動效的 React 彈窗 demo查看效果。

類似地,還有 Toast 之類的,也可以這樣實(shí)現(xiàn)。

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 的動效就方便多了。

4. 總結(jié)

至此已把待動效的 React Modal 組件實(shí)現(xiàn)出來了。雖然 React 中沒有類似 Vue 官方定義的<transition>標(biāo)簽,不過我們可以自己或者借助第三方組件來實(shí)現(xiàn)。

以上就是React實(shí)現(xiàn)動效彈窗組件的詳細(xì)內(nèi)容,更多關(guān)于React彈窗組件的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • React報(bào)錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React報(bào)錯Type '() => JSX.Element[]&apos

    這篇文章主要為大家介紹了React報(bào)錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • 詳解create-react-app 自定義 eslint 配置

    詳解create-react-app 自定義 eslint 配置

    這篇文章主要介紹了詳解create-react-app 自定義 eslint 配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法

    React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法

    這篇文章主要介紹了React數(shù)據(jù)傳遞之組件內(nèi)部通信的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解React?Native中如何使用自定義的引用路徑

    詳解React?Native中如何使用自定義的引用路徑

    這篇文章主要為大家介紹了React?Native中如何使用自定義的引用路徑詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性

    react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性

    這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法,一步一步優(yōu)化react性能的過程,告訴大家使用immutable.js的必要性,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 淺析history 和 react-router 的實(shí)現(xiàn)原理

    淺析history 和 react-router 的實(shí)現(xiàn)原理

    react-router 版本更新非常快,但是它的底層實(shí)現(xiàn)原理確是萬變不離其中,在本文中會從前端路由出發(fā)到 react-router 原理總結(jié)與分享,本文對history 和 react-router實(shí)現(xiàn)原理講解的非常詳細(xì),需要的朋友跟隨小編一起看看吧
    2023-08-08
  • 詳解React中函數(shù)式組件與類組件的不同

    詳解React中函數(shù)式組件與類組件的不同

    React?函數(shù)式組件與類組件的主要區(qū)別在于它們的定義和聲明方式以及它們之間的一些特性,所以本文就詳細(xì)的給大家講講React中函數(shù)式組件與類組件有何不同,需要的朋友可以參考下
    2023-09-09
  • React?useEffect不支持async?function示例分析

    React?useEffect不支持async?function示例分析

    這篇文章主要為大家介紹了React?useEffect不支持async?function示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • React實(shí)現(xiàn)antdM的級聯(lián)菜單實(shí)例

    React實(shí)現(xiàn)antdM的級聯(lián)菜單實(shí)例

    這篇文章主要為大家介紹了React實(shí)現(xiàn)antdM的級聯(lián)菜單實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • React狀態(tài)提升案例介紹

    React狀態(tài)提升案例介紹

    這篇文章主要介紹了React狀態(tài)提升案例,所謂 狀態(tài)提升 就是將各個子組件的 公共state 提升到它們的父組件進(jìn)行統(tǒng)一存儲、處理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-04-04

最新評論