실무/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>
반응형