vue transition 테스트 코드

참고: leave 되는 블럭은 화면이 멈춘 상태로 사라진다.

참고: :name 으로 transition 의 이름을 변경할 수 있다.

 

<template> 
  <div>
    <div class="flex bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3">
      <!-- <p class="text-sm">Some additional text to explain said message.</p> -->
      <button class="mybtn" @click="onPage(1)">page 1</button>
      <button class="mybtn" @click="onPage(2)">page 2</button>
    </div>

    <div class="relative">
      <transition :name="trans_name">
        <div 
          v-if="page==1"
          class="absolute bg-red-600 h-80 w-full"
          >
          <div class="text-white text-4xl">{{ count }} </div>
        </div>
      </transition>

      <transition :name="trans_name">
        <div 
          v-if="page==2"
          class="absolute bg-blue-600 h-80 w-full"
          >
          <div class="text-white text-4xl">{{ count }} </div>
        </div>
      </transition>

    </div>

  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() { 
    return {
      count: 0,
      page: 1,
      trans_name: 'slide-fade',
    }
  },
  mounted() {
    setInterval(() => {
      this.count++;
    }, 200);
  },
  methods: {
    onPage(p) {
      this.page = p;
      if(p == 1) {
        this.trans_name = 'slide-fade'
      }
      else {
        this.trans_name = 'slide-fade-b'
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  /* color: #2c3e50; */
  /* margin-top: 60px; */
}


.slide-fade-enter-active {
  transition: all 5s ease;
}

.slide-fade-leave-active {
  transition: all 5s ease;
}

.slide-fade-enter-from {
  transform: translateX(-100%);
  /* opacity: 0; */
}
.slide-fade-leave-to {
  transform: translateX(100%);
  /* opacity: 0; */
}


.slide-fade-b-enter-active {
  transition: all 5s ease;
}

.slide-fade-b-leave-active {
  transition: all 5s ease;
}

.slide-fade-b-enter-from {
  transform: translateX(100%);
}
.slide-fade-b-leave-to {
  transform: translateX(-100%);
}



</style>