모달 닫을때 oncClose() 관련 질문입니다
알
1달 전
안녕하세요
강사님은 모달을 닫으실때 애니메이션이 들어가는데 저는 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>