NodeJS wrong rendering during nested transition

Question

I'm building a dialog component that embeds an overlay that shades the rest of the screen, preventing any action. I would like the dialog itself to appear with sliding effect, while the overlay fades in, (and the opposite when disappearing).

Somehow the effects works well when closing the dialog, but when opening, while being "transitioned", the overlay doesn't render properly, having a height of 0 pixels..

JsFiddle (dialog pops after 1 second, click overlay to close it)

I tried forcing the transition to apply only to opacity with the following code, but no result..

.fade-enter-active {
  transition: all 0s;
  transition: opacity .3s;
}

Any idea what is wrong here?