コンポーネント間の遷移をアニメーション化する

debugcn 投稿 Dev

リック・ジョリー

次のコンポーネントがDOMに追加されてフェードインする前に、最初のコンポーネントがフェードアウトしてDOMから削除される、2つのコンポーネント間をアニメーション化したいと思います。それ以外の場合、新しいコンポーネントがDOMに追加され、古いコンポーネントが削除されます。あなたはこのフィドルで問題を見ることができます：

http://jsfiddle.net/phepyezx/4

// css snippet
.switch-enter {
    opacity: 0.01;
}
.switch-enter.switch-enter-active {
    opacity: 1.0;
}
.switch-leave {
    opacity: 1.0;
}
.switch-leave.switch-leave-active {
    opacity: 0;
}

// React snippet 
<ReactCSSTransitionGroup transitionName="switch">
    <div key={key} className={className}>{this.text()}</div>
</ReactCSSTransitionGroup>

（私にとって）受け入れられない解決策は、ここに示すように、新しいコンポーネントに移行する前に、元のコンポーネントをcssで非表示にすることです。

http://jsfiddle.net/phepyezx/5

// Change to css
.switch-leave {
    visibility: hidden;
    height: 0px;
    width: 0px;
    opacity: 1.0;
}

元のコンポーネントが削除される前に、新しいコンポーネントのマウントから反応を「遅らせる」方法はありますか？私はこれを達成するためにvelocityまたは他のライブラリを受け入れています。

ありがとう

リック・ジョリー

componentWillUnmount()ライフサイクル法を使用して解決しました。

http://jsfiddle.net/phepyezx/9/

コードは次のとおりです。

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

const Off = React.createClass({
    componentWillUnmount () {
        this.props.handleTransitionEnd();
    },
    render()  {
        return (
            <div className="off button">OFF</div>
        )
    }
});

const On = React.createClass({
    componentWillUnmount () {
        this.props.handleTransitionEnd();
    },
    render()  {
        return (
            <div className="on button">ON</div>
        )
    }
});

var Switch = React.createClass({
    getInitialState: function() {
        return {
            on: false,
            transitionEnd: true
        };
    },

    toggle: function(e) {
        this.setState({
            on: !this.state.on,
            transitionEnd: false
        });
    },

    handleTransitionEnd() {
        this.setState({transitionEnd: true});
    },

    renderOff() {
        if (! this.state.on && this.state.transitionEnd) {
            return (
                <Off key="off" handleTransitionEnd={this.handleTransitionEnd} />
            )
        }
    },

    renderOn() {
        if (this.state.on && this.state.transitionEnd) {
            return (
                <On key="on" handleTransitionEnd={this.handleTransitionEnd} />
            )
        }
    },

    render: function() {
        return (
            <div>
              <button onClick={this.toggle}>Toggle</button>
              <ReactCSSTransitionGroup transitionName="switch">
                {this.renderOff()}
                {this.renderOn()}
              </ReactCSSTransitionGroup>
            </div>
        );         
    }
});

React.render(<Switch/>, document.getElementById("switch"));

そして関連するcss：

.switch-enter {
    opacity: 0.01;
}
.switch-enter.switch-enter-active {
    opacity: 1.0;
    transition: opacity 500ms ease-in;
}
.switch-leave {
    opacity: 1.0;
}
.switch-leave.switch-leave-active {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

代わりに絶対位置決めと遅延を使用するJonnyBuchananの回答でも、同じ効果的な結果を得ることができます。componentWillUnmount()

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]