React-Router 添加 class-动画

Question

请帮帮我，我想为这部分添加一个 class 动画，当部分将卸载时...部分在路线组件中

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

正如上面评论中提到的，有像 react-spring, React Transition Group, and my personal favorite, Framer Motion 这样的第 3 方工具，它们是专门为向 React 添加动画而构建的。其中每一个都有一个相当容易使用的 API 来添加退出动画。

如果您希望自己完成此操作以了解有关动画工作原理的更多信息，或者因为您不需要额外包的额外重量，那么您可以采用我发现的一种方法可靠且有效。

您在效果的清理阶段使用 return 函数的想法不适用于此处。那是因为当函数具有运行时，将满足导致组件从 DOM 中删除的条件，因此卸载继续进行并且您的动画永远没有时间运行.

相反，您可以使用两个状态变量做一些不同的事情。使用两个变量，您可以使用一个来控制何时运行动画，另一个作为条件来表示应该从 DOM.

中删除元素

使用 onAnimationEnd 事件，我们将能够设置用于从 DOM 移除元素的变量，仅 在 CSS 动画完成后 是运行.

演示：

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

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>

React-Router 添加 class-动画

React-Router add class-animation

router

reactjs

演示：