Запуск переходов только для первого слоя детей в React.js

Question

Вот как выглядит мое приложение React.js:

• Слой X
• Слой X
  • Слой Y
    • Слой Z
    • Слой Z
  • Слой Y
    • Слой А
• Слой X
  • Слой Б
    • Слой C
    • Слой C

Каждый из этих слоев должен иметь уникальные переходы. В настоящее время моя проблема заключается в том, что созданные мной переходы передаются по дереву. Поэтому, даже если я настроил переход для слоя Z, он будет выполняться одновременно с переходами для верхних слоев, то есть слоев X и Y.

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

Это мой текущий код перехода Layer X (самый высокий в дереве). Я не думаю, что это даже выполняется, но вот как это выглядит:

import React, { Component, PropTypes } from 'react';
import { TransitionMotion, spring } from 'react-motion';

const willEnter = () => ({
  opacity: 0,
  scale: 0.00001,
  rotate: 25,
  translateX: -100
});

const willLeave = () => ({
  opacity: spring(0, {stiffness: 100, damping: 10}),
  scale: spring(0.00001, {stiffness: 100, damping: 10}),
  rotate: spring(25, {stiffness: 100, damping: 10}),
  translateX: spring(100, {stiffness: 100, damping: 20})
});

const getStyles = () => ({
  opacity: spring(1, {stiffness: 100, damping: 10}),
  scale: spring(1, {stiffness: 100, damping: 10}),
  rotate: spring(0, {stiffness: 100, damping: 10}),
  translateX: spring(0, {stiffness: 100, damping: 20})
});

export class MainTransition extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isMounted: false,
      animateLayer: 2
    }
  }

  componentDidMount() {
    const that = this;

    setTimeout(function() {
      if (that.props != null) {
        that.setState({
          animateLayer: that.props.children[0].props.animateLayer
        })

        console.log(that.props.children[0]);
      }
    })
  }

  render() {
    return (
      <TransitionMotion
        styles={ [{
          key: this.props.pathname,
          style: getStyles(),
          data: this.props.children[0]
        }] }
        willEnter={ willEnter }
        willLeave={ willLeave }
      >
        {
          (interpolated) =>
            <div style={{minHeight: '800px'}}>
              { interpolated.map(({ key, style, data }) =>
                <div
                  key={ `${key}-transition` }
                  style={this.state.animateLayer === 1 ? {
                    ...styles.wrapper,
                    transform: `translateX(${style.translateX}%)`
                  } : null }
                >
                  {console.log(this.state.animateLayer)}
                  {

                    React.Children.map(data, (child) => {
                      return (
                        React.cloneElement(child,
                          {
                            animateLayer: 2
                          }
                        )
                      )
                    })
                  }
                </div>
              ) }
            </div>
        }
      </TransitionMotion>
    )
  }
}

MainTransition.propTypes = {
  children: PropTypes.array.isRequired
};

var styles = {
  wrapper: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: 0,
    top: 0
  }
};

export default MainTransition;