[[406647]]

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

[[406648]]

1. 沒有動效的彈窗

在 React 中，可以這樣來實現(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 屬性來控制展示還是不展示，但完全沒有漸變的效果。

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

[[406649]]

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

很多同學(xué)在自己實現(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)閉動效。

當(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)實現(xiàn)了，樣式也要一起寫上。比如我們要實現(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; 
} 

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

一個帶有動效的彈窗就已經(jīng)實現(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> 
  ); 
}; 

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

[[406650]]

3. react-transition-group

我們在實現(xiàn)動效的思路上借鑒了 react-transition-group 中的 CSSTransition 組件。 CSSTransition 已經(jīng)幫我封裝好了動效展開和關(guān)閉的過程，我們在實現(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 組件實現(xiàn)出來了。雖然 React 中沒有類似 Vue 官方定義的 <transition> 標簽，不過我們可以自己或者借助第三方組件來實現(xiàn)。