CODEWITHSUNDEEP
javascriptreactjs
Abhishek
Abhishek

Reputation: 1714

FadeIn react component using javascript

According to react documentation only way to animate is by usingReactCSSTransitionGroup. Is there anyway to do animation using only Javascript? Thanks.

Upvotes: 1

Views: 554

Answers (2)

wintvelt
wintvelt

Reputation: 14101

Typical way to do a fadeIn animation is:

  • define a css-class that animates fadeIn in someway
  • in componentDidMount(), add a setState() method that adds the faded-in class to your component
  • your component will then re-render, with the new class. Applying any css animations that you have defined (in css of course)

PS: With simple javascript, you can only add animation when the component appears, or when it updates.
When your component leaves (so if you would want a fade-out animation), it is much, much harder to do that with javascript only.

Upvotes: 1

Abhishek
Abhishek

Reputation: 1714

Finally i found this npm package It has all the basic animation.

for fadeIn animation 

 constructor(props) {
   super(props);
    this.state = {
     opacity: 0
    }
  // react state animation wrapper
  this._animate = new ReactStateAnimation(this)
}
componentDidMount () {
  this._fadeIn();
}

_fadeIn = () => {
   this._animate.linearIn('opacity', 0.9, 300);
};

pretty simple!

Upvotes: 1

Related Questions