vue.js/vue.js 2
60. <vue-news> 프로젝트 | Router 트렌지션
DEV-Front
2022. 8. 6. 00:16
반응형
https://kr.vuejs.org/v2/guide/transitions.html
진입/진출 그리고 리스트 트랜지션 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
<App.vue>
<router-view /> 있는쪽에
<transition> 태그 감싸주고 name과 style 태그 넣어주면 끝
<template>
<div id="app">
<tool-bar></tool-bar>
<transition name="page">
<router-view />
</transition>
</div>
</template>
<script>
import ToolBar from './components/ToolBar.vue';
export default {
components:{
ToolBar,
}
}
</script>
<style>
body{
padding: 0;
margin: 0;
}
/* Router 트렌지션 */
.page-enter-active,
.page-leave-active {
transition: opacity .5s;
}
.page-enter,
.page-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
</style>
반응형