在 ReactJS 中使用 Animate.css 和 react-animated-css答案

【问题标题】：use Animate.css in ReactJS with react-animated-css在 ReactJS 中使用 Animate.css 和 react-animated-css
【发布时间】：2020-10-22 06:13:43
【问题描述】：

我正在尝试在 React 中实现 Animate.css，在我的研究过程中，我发现了 react-animated-css 包，它似乎很简单，但我无法让它工作。

在文档中（如果可以称其为文档）据说用户应该在 HTML 页面中包含Animate.css，我没有这样做，因为我正在使用 React 并且没有HTML 页面，但是我通过 npm 安装了 animate.css。

下面是我的代码示例：

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  render () {

   return (
    <div>
      <Animated 
         animationIn="fadeInDown" 
         animationOut="zoomOut" 
         animationInDuration={1000} 
         animationOutDuration={1000} 
         isVisible={true}
      >
          <h1 style={{backgroundColor: 'red'}}>TESTE 1</h1>
      </Animated>
    </div>
   )
 }
}

我也尝试过使用状态动态设置isVisible，但没有任何成功：

import {Animated} from 'react-animated-css'

class ComponentTest extends Component {

  state = {animacao: false}

  toggleAnimation = () => {

     let animacao = !this.state.animacao
     this.setState({animacao})
  }

  render () {

   return (
    <div>
      <Animated 
         animationIn="fadeInDown" 
         animationOut="zoomOut" 
         animationInDuration={1000} 
         animationOutDuration={1000} 
         isVisible={this.state.animacao}
      >
          <h1 style={{backgroundColor: 'red'}}>TESTE 1</h1>
      </Animated>
      <button onClick={this.toggleAnimation} >Animação</button>
    </div>
   )
 }
}

当我检查我的组件时，我发现在这两种情况下都应用了这些类：

这是包的页面：https://www.npmjs.com/package/react-animated-css

知道我做错了什么吗？

附：使用这个包不是必须的，我完全愿意接受建议。

【问题讨论】：

您需要包含 animate.css 文件。运行 npm install 不会为您做到这一点。您可以将其添加到您的index.html（在公共文件夹的 React 应用程序中有一个）；使用 css @import 导入应用程序中包含的另一个 css 文件；或者如果您的应用基于 create-react-app，您可以直接将其导入到组件文件中。
您必须在./public/index.html 文件中包含：<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head>。
你说的都对。它工作得很好。非常感谢。

标签： css reactjs animation animate.css react-animated

【解决方案1】：

如果您使用create-react-app，只需在您的App.js 文件中导入类似import 'animate.css' 的动画css。我希望它对你有用。

【讨论】：

【解决方案2】：

到目前为止，我不知道您可能已经得到了答案，但它在您的 ComponentTest 中是 <Animate></Animate> 而不是 <Animated></Animated>。在我不知道的以前版本中，它可能是“动画”的。但是，您可以在此处查看。 https://www.npmjs.com/package/animate.css-react

【讨论】：