Vue에서 매끈한 UI 애니메이션 - Transition이 작동 안해요

[lee]

<template>
  <Discount/>

  <!-- top bar -->
  <div class="menu">
    <a v-for="(abc, i) in menus" :key="i">{{ abc }}</a>
  </div>

  <div class="start end">
    <!-- Modal -->
    <Modal @closeModal="closeModal" :products="products" :modal="modal" :modal_selected="modal_selected"/>
  </div>

  <!-- product cards -->
  <Card @openModal="openModal(i)" @increase="increase(i)" :product="product" v-for="(product, i) in products" :key="i"/>
</template>

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

export default {
  name: 'App',
  data() {
    return {
      modal : false,
      modal_selected : 0,
      menus : ['Home', 'Products', 'About'],
      products : rooms
    }
  },
  methods: {
    increase(idx){
      this.products[idx].num_anomaly += 1;
    },
    openModal(idx){
      this.modal = true;
      this.modal_selected = idx;
    },
    closeModal(){
      this.modal = false;
    }
  },
  components: {
    Discount : Discount,
    Modal : Modal,
    Card : Card
  }
}
</script>

<style>
.start {
  opacity: 0;
  transition: all 1s;
}
.end {
  opacity: 1;
}

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;
}
.white-bg img {
  width: 50%;
  margin-top: 40px;
}

#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: 50%;
  margin-top: 40px;
}

</style>

 

코드는 위와 같은데요, transition 1초로 줘서 서서히 변해야 하는데 변하는 게 없고 바로 end style로 변경됩니다.

end의 opacity를 바꿔보면 end까지 반영 되는건 확인이 되는데 transition 동작이 안되네요.. 왜그럴까요?

[lee]

뒤에 나오는   <div class="start" :class="{ end: modal }"> 부분은 잘 되는데 맨 처음 들어주신 예시만 동작이 안되네요..

[codingapple]

맨 처음 들었던 예시가 뭐였죠 

 

[lee]

<template>
  <Discount/>

  <!-- top bar -->
  <div class="menu">
    <a v-for="(abc, i) in menus" :key="i">{{ abc }}</a>
  </div>

  <div class="start end">
    <!-- Modal -->
    <Modal @closeModal="closeModal" :products="products" :modal="modal" :modal_selected="modal_selected"/>
  </div>

  <!-- product cards -->
  <Card @openModal="openModal(i)" @increase="increase(i)" :product="product" v-for="(product, i) in products" :key="i"/>
</template>

 

이렇게 다이나믹 클래스 안쓰고 하드 코딩 했을 때요!

[codingapple]

원래 start와 end 클래스를 미리 부착하고 있으면 애니메이션이 동작하지 않고

클릭이나 그럴 시에 end 클래스를 붙여주는 코드가 필요합니다 

[글쓴이]

글