Ответ 1

Вы можете реализовать анимацию в API обеих анимаций. Вот основное отличие:

ReactTransitionGroup - это API, по которому ReactCSSTransitionGroup встроенный. Основное различие между ними состоит в том, что Анимации ReactTransitionGroup записываются в Javascript вместо CSS, и обратный вызов предоставляется для вызова, когда анимация полный вместо того, чтобы полагаться на события перехода CSS.

Мое заключение - использование анимации CSS для простых задач, в то время как Javascript для сложных.

Например, если компонент имеет статическую высоту - вы можете реализовать его через CSS, как показано ниже в примере. Но если ширина/высота динамические, вы можете сделать это с помощью Javascript. В примере Javascript я использую библиотеку Velocity для анимации. Это производительность лучше, чем анимация jQuery. Конечно, вы можете реализовать анимацию самостоятельно, но зачем изобретать колесо?

Я реализовал slideUp/slideDown с обоими API. Проверьте это ниже.

(CSS) Реализация через ReactCSSTransitionGroup:

const CSSTransitionGroup = React.addons.CSSTransitionGroup;
const TransitionGroup = React.addons.TransitionGroup;

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
    	this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <CSSTransitionGroup transitionName="example">
            	{ this.state.visible ? <div className='panel' /> : null }
            </CSSTransitionGroup>
        </div>
    }
}

React.render(<Example />, document.getElementById('container'));

.panel {
    width: 200px;
    height: 100px;
    background: green;
    margin-top: 10px;
}

.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="container">
    <!-- This element contents will be replaced with your component. -->
</div>

Ответ 2

В соответствии с просьбой Иордана Энева я разветкил его JSFiddle.

Вот решение, которое не требует React Css Transition Group вообще. Я лично являюсь фанатом классных переключателей. То есть вы можете создать анимацию css, как вам нравится.

https://jsfiddle.net/fyuh32je/3/

(весь код в скрипке)

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: 'panel' };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: this.state.visible == 'panel'? 'panel visible' : 'panel' });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{!this.state.visible == 'panel' ? 'Slide up' : 'Slide down'}</button>
                <div className={this.state.visible}>
                <p>This is some dynamic content!</p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
              </div>
        </div>
    }
}

React.render(<Example />, document.getElementById('container'));

Я знаю, что это грязно, чтобы использовать видимую переменную состояния, как это, но я нахожусь на работе и не слишком много времени, чтобы слишком сильно меняться. Обратите внимание, что мы используем видимый класс для переключения контейнера div с анимацией.

Вообще говоря. Контейнеры с динамической высотой могут быть анимированы с использованием хакерского использования атрибута max-height в css.

Ответ 3

Если вы (как и я) пришли сюда в поисках альтернативы ответа jQuery slideDown/slideUp, тогда react-slidedown кажется простым в использовании компонентом реакции. На странице github демонстрационный и пример кода.