index.jsx

  initiateTransition: function() {
    // Set the state so that both screens
    // will be rendered.
    this.setState({
      transitionStarted: true,
      transitionDirection: this.state.activeScreen.get('stackIndex') > this.state.screensStackTop.get('stackIndex') ? "back" : "fwd"
    });

    // Schedule a cleanup so that we remove the 
    // previous screen after the transition occurs
    setTimeout(function() {
      // VALI HINT 1: Maybe we can change the name of this
      _this._resetTransition();
    }, 1000);
    // VALI HINT 2: What if we keep the time as a local constant
    // ANIMATION_DURATION, and what if we dynamically set
    // the 'animation-duration' style from js based on that
    // constant? 
  },
  
  shouldTransition: function() {
    return !this.state.transitionStarted &&
           !this._equalScreens(this.state.activeScreen, this.state.screensStackTop);
  },
  
  shouldStartAnimation: function() {
    return this.state.transitionStarted && !this.state.isTransitioning;
  },
  
  componentDidUpdate: function(prevProps, prevState) {
    var _this = this;
    if (this.shouldTransition()) {
      this.initiateTransition();
    } else if (this.shouldStartAnimation()) {
      this.setState({ isTransitioning: true });
    }
  },

@bogdan-dumitru i'm very pleased! 💌