實現一個帶有動效的 React 彈窗元件

蚊子部落格發表於2021-06-21

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

沉迷工作

1. 沒有動效的彈窗

在 React 中,可以這樣來實現:

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屬性來控制展示還是不展示,但完全沒有漸變的效果。

若我們想實現 fade, zoom 等動畫效果,還需要對此進行改造。

今天也是開心的一天

2. 自己動手實現有動效的彈窗

很多同學在自己實現動效時,經常是展示的時候有動效,關閉的時候沒有動效。都是動效的時機沒有控制好。這裡我們先自己來實現一下動效的流轉。

剛開始我實現的時候,動效只有開始狀態和結束狀態,需要很多的變數和邏輯來控制這個動效。

後來我參考了react-transition-group元件的實現,他是將動效拆分成了幾個部分,每個部分分別進行控制。

  • 展開動效的順序:enter -> enter-active -> enter-done;
  • 關閉動效的順序:exit -> exit-active -> exit-done;

動效過程在enter-activeexit-active的過程中。

我們再通過一個變數 active 來控制是關閉動效是否已執行關閉,引數 open 只控制是執行展開動效還是關閉動效。

當 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執行完畢的監聽函式
const onTransitionEnd = () => {
  // 當open為rue時,則結束狀態為'enter-done'
  // 當open未false時,則結束狀態為'exit-done'
  setAniClassName(open ? 'enter-done' : 'exit-done');

  // 若open為false,則動畫結束時,彈窗的生命週期結束
  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,
  );
};

動效的流轉過程已經實現了,樣式也要一起寫上。比如我們要實現漸隱漸現的 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;
}

如果是要實現放大縮小的 zoom 效果,修改這幾個 class 就行。

一個帶有動效的彈窗就已經實現了。

使用方式:

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

點選連結自己實現動效的 React 彈窗 demo檢視效果。

類似地,還有 Toast 之類的,也可以這樣實現。

哈哈哈

3. react-transition-group

我們在實現動效的思路上借鑑了 react-transition-group 中的CSSTransition元件。CSSTransition已經幫我封裝好了動效展開和關閉的過程,我們在實現彈窗時,可以直接使用該元件。

這裡有一個重要的屬性:unmountOnExit,表示在動效結束後,解除安裝該元件。

const Modal = ({ open, onClose }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // in屬性為true/false,true為展開動效,false為關閉動效
  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 的動效就方便多了。

modal的動效

4. 總結

幫我點個在看吧

至此已把待動效的 React Modal 元件實現出來了。雖然 React 中沒有類似 Vue 官方定義的<transition>標籤,不過我們可以自己或者藉助第三方元件來實現。

歡迎關注我的公眾號:“前端小茶館”,

前端小茶館

相關文章