在 ReactJs 组件中使用 AnimateCSS [英] Using AnimateCSS in ReactJs component

查看:90
本文介绍了在 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆