trasition 안먹는데 이유가 뭔지 모르겠습니다

<template>
<div id="app">

<!-- <div class="start" :class="{ end : 모달창열렸니 }"> -->
<transition name="fade">
<Modal @closeModal="모달창열렸니 = false;"
 :원룸들="원룸들" :누른거="누른거"
 :모달창열렸니="모달창열렸니" />
</transition>

<style>
#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;
}

.body{
margin: 0;
}

div {
box-sizing: border-box;
}

.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;
}

.discount{
background: gray;
padding: 10px;
margin: 10px;
border-radius: 5px;
}

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

.end {
 opacity: 1;
} */

.fade-enter-from {
opacity: 0;
}

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

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

</style>