如何在元素离开页面时为其设置动画？

Question

我目前正在设计一个菜单，当你点击菜单按钮时，它会在右侧滑入，我希望它会在你点击 X 时滑出。

到目前为止，我已经将动画中的幻灯片放下，所以一旦呈现，就会出现此动画：

@keyframes slideInFromRight {
    0% {
      transform: translateX(50%);
    }
    100% {
      transform: translateX(0);
    }
}

当用户点击 X 并且该项目不再在页面上呈现时，我有什么办法可以将此动画（滑出）应用到 div：

@keyframes slideInFromRight {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(50%);
    }
}

不确定这是否有任何相关性，但是，对于菜单的呈现，我使用 useState() 反应挂钩来决定何时在侧边栏菜单中呈现。

Answer 1

你应该使用状态变量来改变类名，例如，

import React, {useState} from 'react';

function index() {
  const [slideEffect, setSlideEffect] = useState(false);
  const slide = () => setSlideEffect(!slideEffect);

  return <div className=slideEffect?"slideRight":"slideLeft">Element</div>;
}

export default index;

您也可以使用 animate css https://animate.style/ 通过 npm 安装它，

npm install animate.css --save

然后把我写的代码改成这样

return <div className={`animate__animated ${slideEffect? "animate__fadeOutRight":"animate__fadeInRight"}`}>Element</div>;

如何在元素离开页面时为其设置动画？

How to animate an element as it leaves a page?

html

css

animation

menu

reactjs