javascript ReactJS：用于 css 转换的切换类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26910396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS: Toggle class for css transition
提问by eye_mew
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.
在组件（甚至页面）完全呈现后，我需要在 css 类上切换，以便在页面加载时对相关属性进行动画处理。
How do I go about doing this, preferably without jQuery?
我该如何去做，最好没有 jQuery？
If I toggle a component's class in componentDidMount, the animation doesn't actually happen.
如果我在 中切换组件的类componentDidMount，动画实际上不会发生。
回答by nilgun
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.
你到底想在什么时候为元素设置动画？如果您在 render() 函数中指定类名，组件将在页面加载时呈现动画。
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/
这是上述代码的小提琴：http: //jsfiddle.net/f0j4kt0L/
回答by rajesh_kw
You can do it using toggle class as well.
您也可以使用切换类来完成。
var node = ReactDOM.findDOMNode(this.refs.el);
node.classList.toggle('menu-open');
