反应：如何为删除DOM元素设置动画？

Question

我有一个横幅我的React组件，我想向其添加“关闭”功能。当前的实现如下：

function Home() {
  return(
    <Banner />
    <Main />
  );
}

function Banner() {
  const [hide, setHide] = React.useState(false);
  const handleClick = () => setHide(true);
  return !hide ? (
    <div>
      This is a banner.
      <button onClick={handleClick}>Dismiss</button>
    </div> : null;
}

但是，此实现相当突然，我无法对其进行动画处理。有没有更好的方法来避免元素跳动以提供更好的UI？

Answer 1

我对React动画的首选是react-transition-group库。 （当然还有其他选择）。 Here is my Stackblitz demo

它相当容易使用。将要设置动画的组件包装在CSSTransition组件中，添加一些配置属性，然后在样式表中设置样式。一个小问题是超时属性必须与样式表中的过渡时间相同。有关更多信息，请参见documentation。

以下是该演示中最相关的代码：

应用组件

export function App() {
  const [showBanner, setShowBanner] = useState(true);
  const hideBannerHandler = () => setShowBanner(false);
  const showBannerHandler = () => setShowBanner(true);

  return (
    <div>
      <button onClick={showBannerHandler}>show banner</button>
      <CSSTransition
        in={showBanner}
        timeout={{
          enter: 0,
          exit: 2000
        }}
        unmountOnExit
        classNames="my-node"
      >
        <Banner hideBannerHandler={hideBannerHandler} />
      </CSSTransition>
    </div>
  );
}

CSS（片段）

.my-node-exit {
  opacity: 1;
}

.my-node-exit-active {
  animation: foo 2s ease forwards;
  transform-origin: left;
}

@keyframes foo {
  from {
    opacity: 1;
    background: pink;
    transform: translate(0, 0);
    box-shadow: 0 0 2px 3px pink;
    color: red;
  }

  50% {
    transform: scale(2);
    background: coral;
    box-shadow: 0 0 2px 3px coral;
    color: limegreen;
  }

  to {
    opacity: 0;
    transform: scale(1);
    background: white;
    color: white;
  }
}