相关疑难解决方法(0)

示例是一个功能组件，我在其中有条件地渲染div。我希望它div在有条件渲染时淡入，反之亦然淡出。

为此，我维护了两个本地状态变量：render和fadeIn，它们是根据show传递给示例组件的 prop 计算的。

我所做的是：

• 当showprop it true时，我设置render为true，因此div有条件地渲染，并且在超时后10ms我设置fadeIn 为true，这会将我的 div 的 CSS 类名设置为show。
• 当showprop it false时，我设置fadeIn为false，这会将我的 div 的 CSS 类名设置为hide超时200ms（CSS 中的过渡时间）后，我将其设置render 为false，以便div有条件地隐藏。

代码：

interface Props {
  show: boolean;
}

const Example: React.FC<Props> …

我只需要使用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组件生命周期？

使用React Motion的TransitionMotion,我想要进出一个或多个框的动画.当一个框进入视图时,它的宽度和高度应该从0像素到200像素,并且它的不透明度应该从0到1.当框离开视图时,反向应该发生(宽度/高度= 0,不透明度= 0 )

我试图解决这个问题http://codepen.io/danijel/pen/Rabo​​xO但我的代码无法正确转换框.盒子的样式立即跳到200像素的宽度/高度而不是过渡.

代码有什么问题？

let Motion = ReactMotion.Motion
let TransitionMotion = ReactMotion.TransitionMotion
let spring = ReactMotion.spring
let presets = ReactMotion.presets

const Demo = React.createClass({
  getInitialState() {
    return {
      items: []
    }
  },
  componentDidMount() {

    let ctr = 0

    setInterval(() => {
      ctr++
      console.log(ctr)
      if (ctr % 2 == 0) {
        this.setState({
          items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in
        });
      } else {
        this.setState({
          items: [], // fade …

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

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