Сдвиньте переходный компонент реакции

Question

Я только начинаю использовать анимацию/переход в своих проектах React.js. В GIF ниже, когда я закрываю компонент Message, он исчезает. После того, как он исчезает, я скрываю компонент, используя onAnimationEnd.

Что я хочу, чтобы произойти, когда исчезает Message, снимите компоненты вверх. Я не уверен, концептуально, как я мог бы выполнить это либо с помощью анимации/перехода CSS, либо с помощью конкретного метода React.

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

Существует npm модуль, который называется react-collapse, что делает трюк.

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

Вот результаты: кажется, не работает

Answer 2

Я хотел бы предложить вам использовать css transitions.

У вас есть класс под названием open, прикрепленный к корню компонента Message. onAnimationEnd удалить класс open. Теперь используйте height для анимации этого класса.

Pseudo-код.

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

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