Simple fade entrance in VueJS with CSS transition

Question

It looks so simple but I can handle to make it work. When a new element is added to my list, I want the others elements to move to let the space for the new one and then the new one has to appear with a fade transition.

I can't make this simple animation. I can make the others elements to move but my new element does not have any fade transition. It just appears! BIM.

Here's a codepen : https://codepen.io/MuyBien/pen/OEqNEQ

.fade-enter-active {
  transition: opacity .3s ease-out;
  transition-delay: .3s;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-move {
  transition: transform .3s;
}

Answer 1

.fade-enter-active {
  transition: opacity 1s ease-out;
  transition-delay: 1s;
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-move {
  transition: transform 1s;
}

You can just delay the entry.