Using AnimateCSS in ReactJs component

Question

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

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.

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

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>
      )
   }
}

score 0 · Answer 1 · answered Mar 28 '17 at 08:03

0

I had a very similar issue. I made a new classname, copied the style from the animate.css class, and put the new class with the added css style under a reactcsstransitiongroup.

Probably not the ideal answer to your question, but it worked for me.

answered Mar 28 '17 at 08:03

TheDigitalGate

1

Well, your method is a good way however it is not suitable for my context :)) – Đạt Nguyễn Tấn Mar 29 '17 at 15:59

score 0 · Answer 2 · answered Mar 28 '17 at 08:11

0

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

import { bounceIn } from 'animate.css'

answered Mar 28 '17 at 08:11

Borjante

9,767
6
35
61

if you look at the animate.css file in the node_modules directory, you will see that it is a pure CSS file. Thus, you need to import it from your CSS file e.g. `@import "~animate.css/animate.css";` See https://stackoverflow.com/a/55143326/6854455 – LJH Sep 14 '20 at 08:29

Using AnimateCSS in ReactJs component

2 Answers2

Linked