transition 미작동

[김강민]

transition enter는 작동하는데, leave가 작동을 안 하네요...

App.vue
<template>
<div id="app">

 
<transition name="fade">
<Modal @closeModal="modal = false" :room_data="room_data" :modal_num="modal_num" :modal="modal" />
</transition>

<div class="menu">
<a v-for="menu in menus" :key="menu">{{ menu }}</a>
</div>

<Discount />

<Card @openModal="modal = true; modal_num = $event;" v-bind:room="room" v-for="(room, i) in room_data" :key="i" />

</div>
</template>

<script>

import room_data from "./assets/data.js"
import Discount from "./Discount.vue"
import Modal from "./Modal.vue"
import Card from "./Card.vue"

export default {
name: 'App',
data(){
return {
room_data: room_data,
modal: false,
modal_num: 0,
menus: ["Home", "Products", "About"],
}
},
methods: {
},
components: {
Discount: Discount,
Modal: Modal,
Card: Card,
}
}
</script>

<style>
body {
margin-top: 0;
}
div {
box-sizing: border-box;
}

#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

.menu {
background: darkslateblue;
padding: 15px;
border-radius: 5px;
}

.menu a {
color: white;
padding: 10px;
}

.room-img {
width: 100%;
margin-top: 40px;
}

.fade-leave {
opacity: 1;
}

.fade-leave-active {
transition: all 1s;
}

.fade-leave-to {
opacity: 0;
}

.fade-enter {
opacity: 0;
}

.fade-enter-active {
transition: all 1s;
}

.fade-enter-to {
opacity: 1;
}

</style>

 

Modal.vue

<template>
<div class="black-bg" v-if="modal == true">
<div class="white-bg">

<h4>{{ room_data[modal_num].title }}</h4>
<p>{{ room_data[modal_num].content }}</p>
<input v-model.number=month />
<p>Total price during {{ month }} month : {{ room_data[modal_num].price * month }} 원</p>
<button @click="closeModal">close</button>
</div>
</div>
</template>

<script>

export default {
name: "Modal",
data(){
return {
month: 1,
}
},
props: {
room_data: Array,
modal_num: Number,
modal: Boolean,
},
methods: {
closeModal() {
this.$emit("closeModal");
}
},
watch: {
month(value) {
if (isNaN(value) == true) {
alert("Input only number!");
this.month = 1;
}
}
}
}

</script>

<style>
.black-bg {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
padding: 20px;
}
.white-bg {
width: 100%;
background: white;
border-radius: 8px;
padding: 20px;
}

.room-img-modal {
width: 100%;
}

</style>

[김강민]

참고로 vue 버전은 아래와 같습니다.
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},

[codingapple]

opacity: 1 들어있는 클래스는 다 지워봅시다 

[글쓴이]

글