在 Reactjs 中实现 Animejs 脚本

【问题标题】：Implementing Animejs script in Reactjs在 Reactjs 中实现 Animejs 脚本
【发布时间】：2021-07-03 23:05:45
【问题描述】：

我正在尝试在 React.js 中创建一个登录页面，并且我想使用animejs 添加一些动画效果。如何在 React 的类或函数组件中添加动画脚本？

这是我试图在 react.js 中实现的动画：

【问题讨论】：

【解决方案1】：

您可以通过运行“npm install react-animejs”为 React 安装anime.js 从那里您可以像这样导入库：

import ReactAnime from 'react-animejs'
const {Anime, stagger} = ReactAnime

之后，您将可以访问可以像这样使用的组件：

<Anime
initial={[
{
  targets: "#Box",
  keyframes: [
    {
      translateX: 50
    },
    {
      translateY: 50
    },
    {
      translateX: 0
    },
    {
      translateY: 0
    }
  ],
  // easing:'spring',
  duration: 3500,
  loop: true
}
]}
>
<Box />
</Anime>

您可以在官方npm 和github 页面上阅读更多关于使用 React 动画的信息

【讨论】：