React-路由器添加类-动画

提问者：小点点

React-路由器添加类-动画

请，帮助我，我要我添加一个类-动画为这个节，当节将卸载。。。区段在工艺路线组件中

从“React”导入React，{useEffect，UseEstate}；从“。/components”导入{GridRow}；

导出常量Home=（{animClass}）=>；{

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

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

动画-节起始页${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>

共1个答案

匿名用户

正如上面的评论中提到的，有第三方工具，如React-spring，React过渡组，以及我个人最喜欢的Framer Motion，都是专门为React添加动画而构建的。其中每一个都有一个相当容易使用的API来添加退出动画。

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

在效果清除阶段使用返回函数的想法在这里并不合适。这是因为当函数运行时，将满足导致组件从DOM中移除的条件，因此卸载继续进行，而动画永远没有时间运行。

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

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

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

null

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>