Блог

Я только начинаю использовать анимацию / переход в своих React.js проектах. В приведенном ниже GIF-файле, когда я закрываю Message компонент, он исчезает. После того, как он исчезнет, я скрою используемый компонент 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;

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

    amp;-transition {

        amp;-fade-out {

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

        }

    }
}
 

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

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

Псевдокод.

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

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

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

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

Вот результаты: