Transition 질문드립니다.

<template>
  <div id="app">

      <Transition name="fade">
        <Modal @closeModal="flag=false" :원룸들="원룸들"
          :누른거="누른거"
          :flag="flag"></Modal>
      </Transition>

    <div class="menu">
      {{ a }}
    </div>

    <Discount></Discount>

    <Card @openModal="flag = true; 누른거 = $event" :원룸="원룸들[i]" v-for="(a, i) in 원룸들" :key="a" />
  </div>
</template>

<script>
import data from './assets/oneroom.js';
import Card from './Card.vue';
import Discount from './Discount.vue';
import Modal from './Modal.vue';

export default {
  name: 'App',
  data() {
    return {
      누른거: 0,
      원룸들: data,
      flag: false,
      신고수: [0, 0, 0],
      메뉴들: ['Home', 'Shop', 'About'],
      products: ['역삼동원룸', '천호동원룸', '마포구원룸'],
    };
  },
  methods: {},
  components: {
    Discount: Discount,
    Modal: Modal,
    Card: Card,
  },
};
</script>

<style>
body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

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

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

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

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

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

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

2번 .fade-enter-active {
  transition: opacity 1s;
}

.fade-enter{
  opacity: 0;
}

</style>

모달창에서 애니메이션을 부여할 때 1번처럼 강의자료대로하면 적용인 안되고, 2번처럼 하면 애니메이션이 적용이 됩니다. 
이유를 알 수 있을까요?