실무/vue.js 실무 기능

2. setTimeout() 으로 1초후 vue.js transition list기능 (스르륵 나타나게)

DEV-Front 2022. 8. 18. 22:07
반응형
<template>
  <div>
  <transition name="list">
      <div v-if="isActive">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {  
  data(){
    return{
      isActive: false,
    }
  },   
  created() {
    setTimeout(() => {      
       this.isActive = !this.isActive;
    }, 1000);
  },  
};
</script>

<style scoped>
.list-enter-active,
.list-leave-active {
    transition: all 1s;
}

.list-enter,
.list-leave-to {
    /* .list-leave-active below version 2.1.8 */
    opacity: 0;
    transform: translateX(30px);
}
</style>
반응형