-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
모달 닫을때 oncClose() 관련 질문입니다
20.11.29 12:12 작성 조회수 154
0
안녕하세요
강사님은 모달을 닫으실때 애니메이션이 들어가는데 저는 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>
</div>
<a href="" class="modal-close-btn" @click.prevent="onClose">×</a>
</div>
<div slot="body">
<h3>Description</h3>
<textarea name="" id="" cols="30" rows="3" class="form-control" placeholder="Add a more derailed description..." readonly v-model="card.description"></textarea>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
<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}`)
}
}
}
</script>
<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;
}
</style>
답변을 작성해보세요.
0
김정환
지식공유자2020.11.29
강의에서 소개하지 않았지만 애니매이션을 위해 vue는 "트랜지션"이라는 기능을 제공합니다.
모달 컴포넌트를 보시면 <transition name="modal"> 컴포넌트를 사용하고 있을거에요. 이렇게 하면 vue가 modal로 시작되는 css 클래스를 컴포넌트에 붙여주는데요, 하단 스타일부분에 있는 modal-enter, modal-leave-active 가 바로 그것입니다. 실제로 이 클래스에 애니매이션을 위한 코드가 있는거구요.
답변 1