相关疑难解决方法(0)

我在React页面上有一个图像.当状态更新为新图像时,我想执行以下过渡效果:

• 原始图像应放大并淡出
• 新图像也应放大并淡入

效果看起来应该类似于穿过墙到新场景.

我怎么能在React中做到这一点？

我只需要使用jQuery动画,请不要提及过渡.

这是我的代码库

var CommentForm = React.createClass({

    componentWillUnmount: function(cb) {
        console.log('hiding')
        jQuery(this.getDOMNode()).slideUp('slow', cb);
        console.log((this.getDOMNode()))
    },

    componentDidMount: function() {

        jQuery(this.getDOMNode()).hide().slideDown('slow');

        if (this.props.autofocus) {
            jQuery(this.refs.commentArea.getDOMNode()).focus();
        }

    },

    render: function() {
        return (
            <div>
                <div className="panel-footer" ref="commentComponent">
                    <form role="form">
                        <div className="form-group">
                            <textarea className="form-control" placeholder="Say something nice!" ref="commentArea"></textarea>
                        </div>
                        <div className="pull-right">
                            <button className="btn btn-default btn-md" type="button"><span className="fa fa-comment"></span> Comment</button>
                        </div>
                        <div className="clearfix"></div>
                    </form>
                </div>
            </div>
        );
    }

});

正如您所看到的,我可以在安装组件时添加一个非常棒的动画,但我无法使用动画卸载组件,就像我在代码中提到的那样.

有没有想过如何使用jQuery做到这一点？和Reactjs组件生命周期？

我想用我的下拉菜单完成以下任务。

1 - 单击时显示

2 - 第二次单击时隐藏它

3 - 单击外部任意位置时将其隐藏。

4 - 使用幻灯片效果完成所有这些

我已经覆盖了 1-3 个。我4号就被堵住了

如何创建幻灯片效果以及下面发生的以下单击事件？

我已经使用 jQuery 的 SlideToggle （此处未显示）进行了有效的概念验证...但是，我想学习如何以反应方式做到这一点。

如果您想查看完整的代码： react drop-down nav bar

// CASE 1 Show Hide on click, no slide effect yet  
class ServicesDropdown extends Component {
    constructor() {
        super();
        this.state = {
            dropdown: false
        };
    }

    handleClick = () => {
        if (!this.state.dropdown) {
            // attach/remove event handler
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdown: …