CODEWITHSUNDEEP
cssreactjsecmascript-6
Abhishek
Abhishek

Reputation: 1714

How to apply css in react component when using ES6?

I want to apply simple fadeIn animation, and it seems like only way to this is by using ReactCSSTransitionGroup which uses css classes. can anyone help, how implement it in es6.

I'm not sure how apply css classes to my react component while using es6 syntax. Thanks

Upvotes: 1

Views: 370

Answers (1)

DanCouper
DanCouper

Reputation: 850

I'm not sure how apply css classes to my react component while using es6 syntax

I assume you meant how to modify class names during a transition, but if not add className attributes to the component elements? Whether you use ES6 or not is completely irrelevant. In JSX:

<div className="my-div"></div>

In JS:

React.createElement('div', { className: 'my-div' })

want to apply simple fadeIn animation, and it seems like only way to this is by using ReactCSSTransitionGroup which uses css classes. can anyone help, how implement it in es6.

ES6 has nothing to do with CSS and the CSS transition group addon.

If it's just a fade in, and your element is just being introduced to the DOM, you might not need a CSS transition group; if you can, just use a CSS transition on a class.

But the issue with React, what CSS transitions solve, is that with React, animations between states don't tend to work as they would otherwise (often they just don't work at all, as the DOM is destroyed and rebuilt). Literally all the transition group (which is just a generic wrapper component) does is add (up to) four classes, which switch on/off at the times you specify (.mycomponent-enter, .mycomponent-enter-active, .mycomponent-leave, .mycomponent-leave-active). This lets you apply animation via CSS. You apply the properties according to the API - there needs to be key otherwise React will scream at you and it won't work, and there need to be times set enter and leave (otherwise there can't be any animation as there's no time period).

I can't give you much more than that as you haven't specified anything at all re what you've tried. I just want to emphasise that the way you have described this this has literally nothing to do with ES6, or even Javascript really; if you want to apply animations purely using JS that's something different.

Upvotes: 1

Related Questions