Переходы Vue.js - 1-й вход не работает

Question

Я сделал фрагмент кода Code Sandbox , чтобы проиллюстрировать переход vue, не работающий с его первоначальным видом.

Я использую следующую CSS для достижения слайда в выдвиженииЭффект:

.slide-fade-enter-active
  transition: all 2s ease;

.slide-fade-leave-active 
  transition: all 2s ease;

.slide-fade-enter
  // /* .slide-fade-leave-active below version 2.1.8 */
  transform: translateX(40px) !important;
  opacity: 0;

.slide-fade-leave-to
  transform: translateX(-40px);
  opacity: 0;

---

Я рассчитывал, что slide-fade-enter будет применяться, даже если это был начальный рендеринг компонента.

Чего мне не хватает в моем sassчтобы достичь этого?

Answer 1

Чтобы переходы работали при начальном рендеринге, обязательно добавьте атрибут appear

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" 
  appear-active-class="custom-appear-active-class">
  ...
</transition>

Ссылка: https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render