在 ReactJs 组件中使用 AnimateCSS

问题描述

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

I installed the Animate.CSS by npm install animate.css --save and it saved in the ./node_modules, locally packages.

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

As I read the Animate.CSS documentation in Github, it said that just only add the class name such as fadeInDown, bouceInDown...etc in the element that I wanted to make the animation but I do not get any idea about require a class name from locally packages.

问题:我们如何从 Animate.CSS 本地包中要求类名并将其添加到 ReactJs 组件中?

Question: How can we require a class name from the Animate.CSS locally package and add it in the ReactJs Component ?

假设:我有一个如下的反应组件，我想将类名添加为 animatedounceIn.

Assume: I have a react component as following and I want to add class name as animated bounceIn.

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

推荐答案

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

Not sure as I can't test it, but this should work.

import { bounceIn } from 'animate.css'

这篇关于在 ReactJs 组件中使用 AnimateCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！