在 ReactJs 组件中使用 AnimateCSS答案

【问题标题】：Using AnimateCSS in ReactJs component在 ReactJs 组件中使用 AnimateCSS
【发布时间】：2017-08-20 17:44:44
【问题描述】：

我通过 npm install animate.css --save 安装了 Animate.CSS，并将其保存在本地包中的 ./node_modules 中。

当我阅读 Github 中的 Animate.CSS 文档时，它说只需在我想要制作动画的元素中添加诸如 fadeInDown, bouceInDown...etc 之类的类名，但我不知道需要一个类名来自本地包。

问题：我们如何从 Animate.CSS 本地包中获取类名并将其添加到 ReactJs 组件中？

假设：我有一个如下的反应组件，我想将类名添加为animated bounceIn。

export class SimpleInfo extends React.Component {
   render() {
      return(
        <div>My information</div>
      )
   }
}

【问题讨论】：

【解决方案1】：

不确定，因为我无法对其进行测试，但这应该可以。

import { bounceIn } from 'animate.css'

【讨论】：

如果你查看node_modules目录下的animate.css文件，你会发现它是一个纯CSS文件。因此，您需要从您的 CSS 文件中导入它，例如@import "~animate.css/animate.css";见stackoverflow.com/a/55143326/6854455

【解决方案2】：

我有一个非常相似的问题。我创建了一个新的类名，从 animate.css 类中复制了样式，并将添加了 css 样式的新类放在 reactcsstransitiongroup 下。

可能不是您问题的理想答案，但它对我有用。

【讨论】：