NodeJS неправильный рендеринг во время вложенного перехода

Question

Я создаю компонент диалога, который встраивает оверлей, который затеняет остальную часть экрана, предотвращая любые действия. Мне бы хотелось, чтобы само диалоговое окно отображалось с эффектом скольжения, в то время как наложение исчезает (и наоборот при исчезновении).

Каким-то образом эффекты работают хорошо при закрытии диалога, но при открытии, будучи "с переходом", наложение не отображается должным образом, имея высоту 0 пикселей.

JsFiddle (диалоговое окно появляется через 1 секунду, нажмите наложение, чтобы закрыть его)

Я попытался заставить переход применить только к непрозрачности с помощью следующего кода, но безрезультатно.

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

Есть идеи, что здесь не так?