ReactJS:用于 css 过渡的切换类

ReactJS: Toggle class for css transition

本文关键字：用于 css ReactJS      更新时间：2023-09-26

我需要在组件（甚至页面）完全呈现后切换css类，以便在页面加载时对相关属性进行动画处理。

我该如何做到这一点，最好没有jQuery？

如果我在componentDidMount中切换组件的类，动画实际上不会发生。

我实际上没有得到你说的部分：

在组件（甚至页面）完全呈现后，以便 相关属性在页面加载时以动画形式显示。

您究竟要何时对元素进行动画处理？如果在 render（） 函数中指定类名，则组件将在页面加载时呈现动画。

如果要在首次渲染后控制/切换动画，可以使用组件状态控制类名，如下所示：

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);

在这里，我更改了状态以响应按钮单击。您可能希望将其更改为您喜欢的其他事件。

这是上述代码的小提琴： http://jsfiddle.net/f0j4kt0L/

您也可以使用切换类来执行此操作。

var node = ReactDOM.findDOMNode(this.refs.el);
node.classList.toggle('menu-open');
相关文章：