Простой переход в VueJS с переходом CSS

Question

Это выглядит так просто, но я могу справиться, чтобы это сработало. Когда новый элемент добавляется в мой список, я хочу, чтобы другие элементы переместились, чтобы освободить место для нового, а затем новый должен появиться с переходом затухания.

Я не могу сделать эту простую анимацию. Я могу заставить другие элементы двигаться, но мой новый элемент не имеет какого-либо плавного перехода. Это только появляется! BIM.

Вот кодекс: 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;
}

Вы можете просто отложить запись.