[英]ReactJS: Toggle class for css transition
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
切换组件的类,则动画实际上不会发生。
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/
You can do it using toggle class as well. 您也可以使用切换类来完成它。
var node = ReactDOM.findDOMNode(this.refs.el);
node.classList.toggle('menu-open');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.