ReactJS: Toggle class for css transition

Question

I need to toggle on a css class after a component (or even the page) is completely rendered, so that relevant properties are animated on page load.

How do I go about doing this, preferably without jQuery?

If I toggle a component's class in componentDidMount, the animation doesn't actually happen.

Please provide a minimum example or piece of code, so we can provide a better answer that will be a useful resource in the future... — LcSalazar
– LcSalazar, Commented Nov 13, 2014 at 13:56
fyi take a look into the ReactCSSTransitionGroup, might be useful facebook.github.io/react/docs/animation.html — trekforever
– trekforever, Commented Nov 13, 2014 at 19:10

nilgun · Accepted Answer · 2014-11-13 17:04:46Z

15

I didnt actually get the part where you say:

after a component (or even the page) is completely rendered, so that relevant properties are animated on page load.

When exactly do you want to animate the element ? If you specify the class name in render() function the component will be rendered with animation on page load.

If you want to control/toggle animation after first render, you can control the class name using component state like so:

var Hello = React.createClass({

    getInitialState: function(){
        return {
            condition:false
        }
    },

    handleClick :function(){
        this.setState( { condition : !this.state.condition } );
    },

    render: function() {
        return <div>
                <div className={this.state.condition ? "animated" :""}  >Hello {this.props.name}</div>
                <button type="button" onClick={this.handleClick}>Change Condition</button>

               </div>;
    }
});

React.render(<Hello name="World" />, document.body);

Here I changed the state in response to a button click. You may probably want to change this to some other event you like.

Here is a fiddle for the above code : http://jsfiddle.net/f0j4kt0L/

edited Nov 13, 2014 at 17:04

answered Nov 13, 2014 at 16:58

nilgun

10.6k4 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eye_mew Over a year ago

So what I want to do is load the animation immediately after the page is loaded. I've tried exactly what you've suggested, but instead changing the this.state.condition in the componentDidMount method. The css class is applied immediately in that case, with no transition.

nilgun Over a year ago

What happens when you change this line: '<div className="animated">Hello {this.props.name}</div>' ? Doesn't it just work on page load: jsfiddle.net/3fmfous3 ?

Jake Over a year ago

this was a super helpful demonstration. really clarified it for me.

rajesh_kw · Accepted Answer · 2017-02-26 12:41:20Z

1

You can do it using toggle class as well.

var node = ReactDOM.findDOMNode(this.refs.el);
node.classList.toggle('menu-open');

answered Feb 26, 2017 at 12:41

rajesh_kw

1,59216 silver badges14 bronze badges

1 Comment

Rahul Over a year ago

I would say this not the react way of doing stuff.

Collectives™ on Stack Overflow

ReactJS: Toggle class for css transition

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related