반응형
<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>
반응형
'실무 > vue.js 실무 기능' 카테고리의 다른 글
6. vue.js | @clikc=""시 뒤로가기, 앞으로가기, main 이동 (0) | 2022.10.31 |
---|---|
5. vue.js | SearchBar 자동완성 기능_코드, 클릭시 링크 이동 (0) | 2022.09.29 |
4. vue.js SearchBar 자동완성_참고 포스팅 모음 (0) | 2022.09.29 |
3. vue.js에서 search Bar 꾸며주기 (0) | 2022.09.06 |
1. setTimeout() 으로 1초후 vue.js transition fade기능 (안보였다가 천천히 보여짐) (0) | 2022.08.16 |