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

Question

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

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

下面是我的代码示例：

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

知道我做错了什么吗？

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

Answer 1

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