Feature: ReactCSSTransitionGroup delays

[renarsvilnis]

Hi, I want to make a feature request for adding a way to delay enter/appear/leave for ReactCSSTransitionGroup component.

I propose adding new props to ReactCSSTransitionGroup:

• transitionEnterDelay Delay in ms after which element begins enter transition. Defaults to 0.
• transitionAppearDelay Delay in ms after which element begins appear transition. Defaults to 0.
• transitionLeaveDelay Delay in ms after which element begins leave transition. Defaults to 0.

 <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterDelay={300}
          transitionEnterTimeout={500}
          transitionAppear
          transitionAppearDelay={300}
          transitionAppearTimeout={500}
          transitionLeaveDelay={0}
          transitionLeaveTimeout={300}
>
          {items}
</ReactCSSTransitionGroup>

As all defaults for proposed props are 0 it would't add breaking changes for existing ReactCSSTransitionGroup users.

The example before describes my reasons behind the request.

Use case

I'm currently creating an project that contains navigable subpages and each subpage has a unique enter and leave animation with a unique enter/leave duration and it is possible to change to any subpage from another in any order. When changing to a new page the previous subpage leave must end before the new page begins entering in. So I need to delay the entering of the new subpage until old one leaves.

Currently I have an object that defines enter/leave durations for each of the subpages and a helper function calcPageTimeouts(currentPage, lastPage) that calculates the correct timeouts and delays for current subpage for the ReactCSSTransitionGroup component depending on current state.

Each subpage contains multiple different elements that in combination creates an enter/leave animation sequences. As ReactCSSTransitionGroup enter/leave transitions are CSS class based, it's not possible to add a additional transition-delay on an parent element. To add needed behaviour I would need to entirely manage the enter/leave stuff in Javascript rather in CSS by adding a class.

[renarsvilnis]

If anyone interested I made a <DelayMount /> component that tries to allow delayed mounting and "unmounting" of components.

https://gist.github.com/renarsvilnis/bb083fa50c64221c49f43169076cdf31

[cvle]

Checkout this project as an alternative: https://github.com/wikiwi/react-css-transition

[craftzdog]

Why not use transition-delay?

[aweary]

We are no longer maintaining the transition group add-ons, please check out https://github.com/reactjs/react-transition-group instead. Thanks!

[gaearon]

(To be clear, the linked repo is a drop-in replacement as of version 1, which will be maintained in foreseeable future.)