javascript - ReactJS: Toggle class for css transition - Stack Overflow

admin管理员组

文章数量:1221301

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.

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.

• javascript
• css
• reactjs

Share Improve this question Follow edited Nov 13, 2014 at 14:16 eye_mew asked Nov 13, 2014 at 13:48 eye_meweye_mew 9,13377 gold badges3434 silver badges5252 bronze badges 5

• 1 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 Commented Nov 13, 2014 at 13:56
• 1 .toggleClass? api.jquery.com/toggleclass – E. van der Spoel Commented Nov 13, 2014 at 14:00
• Whats the question ? – Pramod Solanky Commented Nov 13, 2014 at 14:08
• Oops, forgot to mention that I'm using react! – eye_mew Commented Nov 13, 2014 at 14:16
• 1 fyi take a look into the ReactCSSTransitionGroup, might be useful facebook.github.io/react/docs/animation.html – trekforever Commented Nov 13, 2014 at 19:10

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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/

You can do it using toggle class as well.

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

本文标签： javascriptReactJS Toggle class for css transitionStack Overflow