React路由器添加类动画

Question

请帮助我，我想为这个部分添加一个类动画，什么时候将unMount.路段在干线上

import React, {useEffect, useState} from "react";
import {GridRow} from "./components";

export const Home = ({animClass}) => {

    const [anim, setAnim] = useState("")

    useEffect(() => {
        return () => {
            setAnim("animated-section-rotateSlideOut")
        }
    }, [anim])


  return <section data-id="home" className={`animated-section start-page ${animClass} ${anim}`}>

      <div className="section-content vcentered">

          <GridRow>
              
                  <div className="title-block">
                      <h2>Alex Smith</h2>
                      <div className="owl-carousel text-rotation">
                          <div className="item">
                              <div className="sp-subtitle">Web Designer</div>
                          </div>

                          <div className="item">
                              <div className="sp-subtitle">Frontend-developer</div>
                          </div>
                      </div>
                  </div>
              
          </GridRow>

      </div>
  </section>
}

Answer 1

正如上述评论中提到的，有第三方工具，如反应弹簧、反应过渡基团和我个人最喜欢的框架运动，这些工具都是为添加动画以作出反应而构建的。其中每一个都有一个相当容易使用的API来添加退出动画。

如果你想自己做这件事来了解更多动画是如何工作的，或者因为你不需要额外的软件包的重量，这里有一个方法你可以采取，我已经发现可靠和有效。

在效果清理阶段使用返回函数的想法并不适合这里。这是因为在函数运行时，将满足从DOM中删除组件的条件，因此卸载过程和动画都没有时间运行。

相反，您可以使用两个状态变量执行不同的操作。使用两个变量，您可以使用一个来控制何时运行动画，而另一个作为条件来指示元素应该从DOM中删除。

使用onAnimationEnd事件，只有在运行CSS动画之后，我们才能够设置从DOM中移除元素的变量。

演示：

单击任意红色方块以应用动画，然后从网格中删除元素。

​

function Example() {
  const [animateOut, setAnimateOut] = React.useState(false)
  const [isRemoved, setIsRemoved] = React.useState(false);
  
  if (isRemoved) return null

  return (
    <div
      className="example"
      onClick={() => setAnimateOut(true)}
      style={animateOut ? {animationName: 'slide-out'} : {}}
      onAnimationEnd={() => setIsRemoved(animateOut)}
    />
  )
}

function App() {
  return (
    <main>
      <Example />
      <Example />
      <Example />
      <Example />
      <Example />
    </main>
  )
}


ReactDOM.render(
  <App />,
  document.getElementById("root")
);

@keyframes slide-out {
  to {
    transform: translateX(-100%) rotate(50deg);
    opacity: 0;
  }
}

.example {
  animation-duration: .3s;
  animation-fill-mode: forwards;
  background-color: red;
  height: 20vh;
  width: 20vh;
}

main {
 display: grid;
 grid-template-columns: repeat(auto-fill, 20vh);
 grid-gap: 1rem;
}

<div id="root"></div>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

​