[매끈한 UI 애니메이션] 동일한 결과가 아닙니다.

영상 초반  css만으로 동작할때 
<div class="start end">
    <Modal @closeModal="modalStatus=false;" :rooms="rooms" :sn="sn" :modalStatus="modalStatus"/>
  </div>

..
..

.start {
  opacity: 0;
  transition: all 1s;
}

.end {
  opacity: 1;
}

강의와 동일하게 class를 기입했는데 동작이 왜 다를까요?
다른 비슷한 질문에 답변하신 내용을 보았지만,
영상 02:18 ~ 02:23 동작이 어떻게 가능한지 이해가 가지 않습니다.