모달 닫을때 oncClose() 관련 질문입니다

Question

안녕하세요 강사님은 모달을 닫으실때 애니메이션이 들어가는데 저는 onClose() 에 적힌대로 링크 이동으로만 처리가 돼서 애니메이션이 없는데요.. 무슨차이일까요..? < template > < div > < Modal > < div slot = "header" class = "moadl-card-header" > < div class = "modal-card-header-title" > < input type = "text" class = "form-control" : value =" card . title " readonly > < a href = "" class = "modal-close-btn" @ click . prevent =" onClose " > × < div slot = "body" > < h3 > Description < textarea name = "" id = "" cols = "30" rows = "3" class = "form-control" placeholder = "Add a more derailed description..." readonly v-model =" card . description " > < div slot = "footer" > < script > import Modal from './Modal.vue' ; import { mapActions , mapState } from 'vuex' ; export default { components: { Modal }, computed: { ... mapState ([ 'card' , 'board' ]) }, created () { const id = this . $route . params . cid this . FETCH_CARD ({ id }) }, methods: { ... mapActions ([ 'FETCH_CARD' ]), onClose () { this . $router . push ( `/b/ ${ this . board . id } ` ) } } } < style > .moadl-card-header { position : relative } .modal-card .modal-container { min-width : 300px ; max-width : 800px ; width : 60% ; } .modal-card-header-title { padding-right : 30px ; } .modal-close-btn { position : absolute ; top : 0px ; right : 0px ; font-size : 24px ; text-decoration : none ; } .modal-card-header { position : relative ; }

김정환 · Answer

강의에서 소개하지 않았지만 애니매이션을 위해 vue는  "트랜지션"이라는 기능을 제공합니다. 모달 컴포넌트를 보시면  <transition name="modal"> 컴포넌트를 사용하고 있을거에요. 이렇게 하면 vue가 modal로 시작되는 css 클래스를 컴포넌트에 붙여주는데요, 하단 스타일부분에 있는 modal-enter, modal-leave-active 가 바로 그것입니다. 실제로 이 클래스에 애니매이션을 위한 코드가 있는거구요.