使用animate实现页面过度_使用 React Hooks 创建可复用的动画组件

Photo by Dylan Ferreira on Unsplash

原文：https://www.freecodecamp.org/news/animating-visibility-with-css-an-example-of-react-hooks/

作者：Christian Sepulveda

译者：Zou Li

提示：

动画总是会取悦用户。看到各种文章的介绍，你可能会觉得开发者们喜欢使用 React Hooks，但我发现自己开始慢慢对 Hooks 产生厌倦了。

某个意外的发现让我对 React Hooks 有了新的认识，它不仅仅是一种新的开发方式。也许你已经从文章标题猜到是什么了，没错，就是动画！

我正在开发一个基于 React 的，使用网格布局组合卡片组件的应用，当删除某个卡片组件时，为它添加动画效果，看起来像下面一样：

但是，和图中效果相比较始终还是有点细微差别。在我的接下来的解决方案中，很好地利用了 React Hooks。

我们将要做什么？

• 开始构建一个基本的项目骨架

• 为元素的消失添加动画效果，解决一些小问题

• 最终效果实现后，将其重构为一个可复用的动画组件

• 在顶部导航和侧边导航中使用该动画组件

如果你没耐心，这里有整个项目的仓库地址，每一步都有相应的标记(链接地址和描述参考 README 文件)。

骨架

我使用 create-react-app 创建了一个简单的应用程序，它是一个简单的卡片网格结构，每个单独卡片可以被隐藏。

实现代码很简单，效果也很无趣。当用户点击眼睛图标时，我们改变卡片的 display 属性。

function Box({ word }) {
    
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);
  function hideMe() {
    
    setVisible(false);
  }
  let style = { borderColor: color, backgroundColor: color };
  if (!visible) style.display = "none";
  return (
    <div className="box" style={style}>
      {" "}<div className="center">{word}div>{" "}<button className="button bottom-corner" onClick={hideMe}>
        {" "}<i className="center far fa-eye fa-lg" />{" "}button>{" "}div>
  );
}

上面的代码中使用到了 React Hooks，但这不是 Hooks 最有趣的用途。

添加动画

我没有构建自己的动画库，而是使用了一个像 animate.css 这样的动画库。react-animated-css 是一个很好的库，它为 animate.css 提供了一个包装器。

安装 react-animated-css

npm install --save react-animated-css

在 index.html 中添加 animate