React Component и CSSTransitionGroup

ранние дни с Facebook ReactJS. Простой переход к постепенному переходу CSS. Он работает так, как ожидалось, с ReactJS v0.5.1. Это не с v11.1, v12.0, v12.1. Здесь CSS и JSX:

CSS

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

JSX для ReactJS v12.1

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example">
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Здесь список Codepens:

Любая помощь была оценена.

Cheers, Лука

Ответы

Ответ 1

Похоже, что CSSTransitionGroup используется для анимации на первоначальном монтировании, но это не больше, чем от React v0.8.0 или около того. Подробнее см. https://github.com/facebook/react/issues/1304.

Одним из решений является просто установить <h1> после установки <HelloWorld>, например:

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  getInitialState: function() {
    return { mounted: false };
  },
  componentDidMount: function() {
    this.setState({ mounted: true });
  },
  render: function() {
    var child = this.state.mounted ?
      <h1>Hello world</h1> :
      null;

    return (
      <ReactTransitionGroup transitionName="example">
        {child}
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Живой пример: http://codepen.io/peterjmag/pen/wBMRPX

Обратите внимание, что CSSTransitionGroup предназначен для перехода дочерних компонентов, поскольку они динамически добавляются, удаляются и заменяются, не обязательно для их анимации при первоначальном рендеринге. Играйте с этим TodoList Codepen (адаптированный из этого примера в документах React), чтобы понять, что я имею в виду. Элементы списка исчезают, когда они добавляются и удаляются, но они не исчезают в первоначальном рендере.

РЕДАКТИРОВАТЬ: недавно была введена новая фаза перехода на "появление", чтобы использовать эффекты анимации на экране. Подробнее см. https://github.com/facebook/react/pull/2512. (Конец уже был объединен с мастером, поэтому я предполагаю, что он будет выпущен с v0.12.2.) Теоретически вы могли бы сделать что-то подобное, чтобы сделать <h1> затухающим в mount:

JS

...
<ReactTransitionGroup transitionName="example" transitionAppear={true}>
    <h1>Hello world</h1>
</ReactTransitionGroup>
...

CSS

.example-appear {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

Ответ 2

Я изучил этот вопрос немного глубже. С текущей версией ReactJS кажется невозможным сделать начальный переход CSS. Больше информации и мыслей здесь.

Скорее всего, все изменится с помощью v0.13.x. Вы можете посмотреть исходный код , в котором есть поддержка transitionAppear.

EDIT: я загрузил из GitHub последнюю версию ReactJS (v0.13.0 - alpha) и построил ее. Все теперь работает соответственно, если вы используете опцию transitionAppear (должно быть установлено истинно явно). Ниже вы найдете обновленные CSS и JSX, а также живой пример:

CSS

.example-appear {
  opacity: 0.01;
  transition: opacity 0.5s ease-in;
}

.example-appear.example-appear-active {
  opacity: 1;
}

JSX для ReactJS v0.13.0 - alpha:

/**@jsx React.DOM*/

var ReactTransitionGroup = React.addons.CSSTransitionGroup;

var HelloWorld = React.createClass({
  render: function() {
    return (
      <ReactTransitionGroup transitionName="example" transitionAppear={true}>
          <h1>Hello world</h1>      
      </ReactTransitionGroup>
    );
  }
});

React.render(<HelloWorld />, document.body);

Живой пример: http://codepen.io/lanceschi/pen/NPxoGV

Cheers, L

Ответ 3

появиться

Обычно компонент не переносится, если он отображается при монтировании компонента <Transition>. Если вы хотите выполнить переход при первом наборе монтирования, appear значение true, и компонент перейдет сразу после монтирования <Transition>. из Docs группы реагирующих переходов

Пример использования

JSX:

<TransitionGroup>
  <CSSTransition classNames="fade" appear={true} >
    <h1>Hello world!</h1>
  </CSSTransition>
</TransitionGroup>

CSS:

.fade-appear {
  opacity: 0.01;
  z-index: 1;
}
.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

По состоянию на:

  • Реакция v16.6.3
  • реакция-переходная группа v2.5.1