相关疑难解决方法(0)

这个简单的东西应该很容易实现,但是我把头发拉出来是多么复杂.

我想做的就是动画安装和卸载React组件,就是这样.这是我到目前为止所尝试的以及为什么每个解决方案都不起作用:

1. ReactCSSTransitionGroup - 我根本不使用CSS类,它是所有JS样式,所以这不起作用.
2. ReactTransitionGroup - 这个较低级别的API很棒,但它要求你在动画完成时使用回调,所以只使用CSS过渡在这里不起作用.总有动画库,这导致下一点:
3. GreenSock - 许可证对于商业用途IMO来说过于严格.
4. React Motion - 这看起来很棒,但是TransitionMotion对于我需要的东西来说却非常混乱和过于复杂.
5. 当然我可以像Material UI那样做一些技巧,其中元素被渲染但保持隐藏(left: -10000px)但我宁愿不去那条路线.我认为它很hacky,我希望卸载我的组件,以便清理它们并且不会使DOM混乱.

我想要一些易于实现的东西.在mount上,动画一组样式; 在卸载时,为相同(或另一组)样式设置动画.完成.它还必须在多个平台上具有高性能.

我在这里碰到了一堵砖墙.如果我遗漏了一些东西并且有一个简单的方法可以做到这一点,请告诉我.

我创建了一个react组件,它由slideUp()和slideDown()动画组成.我已经实现了使用jQuery slideup和slidedown方法.

我必须使用反应动画来实现此功能.

我读到了ReactTransitionGroup和ReactCSSTransitionGroup.解释的方式告诉我,当DomNode安装到组件或卸载时我们可以执行此功能(如果我错了,请纠正我).

我的问题是 - >如何以反应方式执行slideup()和slidedown()而不使用jQuery.

请参阅此jsFiddle for https://jsfiddle.net/guc3yrm1/

PS - >请解释一下,为什么这个反应动画部分看起来有点难以与jQuery相比(我是一个jQuery人)

var Hello = React.createClass({
    getInitialState: function() {
        return {
            slide: false,
        }
    },
    slide: function() {
        if (this.state.slide) {
            $(this.refs.slide).slideDown();
            this.setState({
                slide: false
            });
        } else {
            $(this.refs.slide).slideUp();
            this.setState({
                slide: true
            });
        }
    },
    render: function() {
        return ( 
            <div>
                <input type = "button" value = "clickme" onClick = {this.slide}/> 
                <br />
                <br />
                <div className = "slide" ref="slide" >< /div> …

React.js为名为ReactTransitionGroup的动画提供了一个低级API .在文档中声明,对于钩子componentWillAppear,componentWillEnter并且componentWillLeave,回调作为参数传递.

我的问题是,这个回调究竟是什么以及如何将它传递给那些钩子,文档并没有说出那些回调,除了动画被延迟直到被调用.