How to reverse the z-index of child components? (push animation in React)

Question

So, I have a push/pop animation I'm working on. The pop animation works just fine because of order in which <CSSTransitionGroup> appends its children.

However for the push animation, I want to views to stack the opposite way in terms of the z-index. So I set z-index:1 for the push-enter animation and that works except when I layer multiple animations on top.

Check out my example: http://codepen.io/ccorcos/pen/MwXXaz Press the inc button a quickly. Then change the transitionName to "pop" to see the other animation.

This is a work-around but its not very elegant:

.transition-group > .box:nth-child(0) {
  z-index: 4;
}

.transition-group > .box:nth-child(1) {
  z-index: 3;
}

.transition-group > .box:nth-child(2) {
  z-index: 2;
}

.transition-group > .box:nth-child(3) {
  z-index: 1;
}

Answer 1

I could be wrong but try this:

• Add z-index: 1; into the CSS rules .push-enter & .pop-enter .
• Add z-index: -1; into the CSS rules .push-leave & .pop-leave .

Hope this helps.