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

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() react hook 来决定何时在侧边栏菜单中渲染。

Answer 1

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

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>;