スライドアップ反応成分の移行

Question

私のReact.jsプロジェクトでは、アニメーション/トランジションを使い始めました。下のGIFで、コンポーネントを閉じると、そのコンポーネントはフェードアウトします。フェードした後、私はonAnimationEndを使ってコンポーネントを隠します。

Messageが消えると、下のコンポーネントがスライドしてしまいます。私は、CSSアニメーション/トランジションやリアクション固有の方法で、これをどのように達成するのか、概念的にはわかりません。

Message.js

import React, {PropTypes, Component} from 'react'; 
import MessageTypes from '../constants/MessageTypes'; 

export default class Message extends Component { 

    constructor(props, context) { 
     super(props, context); 
     this.handleClick = this.handleClick.bind(this); 
     this.onAnimationEnd = this.onAnimationEnd.bind(this); 
     this.state = { 
      animate: false, 
      hide: false 
     } 
    } 

    handleClick(e) { 
     e.preventDefault(); 
     this.setState({animate: true}); 
    } 

    onAnimationEnd() { 
     console.log('fdsfd'); 
     this.setState({hide: true}); 
    } 

    render() { 
     return (
      <div ref="message" onAnimationEnd={this.onAnimationEnd} className={`card message ${this.state.hide ? 'hide open' : ''} ${this.state.animate ? 'message-transition-fade-out' : ''}`}> 
       <span className={`icon icon-${this.iconLevel()}`} style={{color: `#${this.iconColor()}`}}></span> 
       <p> 
        <strong>{this.props.title}</strong><br /> 
        <span dangerouslySetInnerHTML={{ __html: this.props.message }} /> 
       </p> 
       <a href="#" onClick={this.handleClick}> 
        <span className="icon icon-close"></span> 
       </a> 
      </div> 
     ); 
    } 

} 

Message.scssは

.message { 

    max-height: 150px; 
    transition: height 2s ease; 

    &.open { 
     height: 0; //define your height or use max-height 
    } 

    &-transition { 

     &-fade-out { 

      @include animation(0s, .3s, fadeout); 

     } 

    } 
} 

Answer 1

トリックを行いますreact-collapse呼ばnpmモジュールがあります。ここで

<Collapse isOpened={this.state.isOpened} keepCollapsedContent={true}> 
    //content here 
</Collapse> 

結果は以下のとおりです。

Answer 2

私はあなたがcss transitionsを使用することをお勧めします。

コンポーネントのルートにopenという名前のクラスが追加されています。 onAnimationEndクラスopenを削除します。今度は、heightを使用して、そのクラスをアニメーション化します。

擬似コード。

.message { 
height: 0px; 
transition: height 0.3s ease; 
} 

.message.open { 
    height: 100px; //define your height or use max-height 
}