728x90
반응형
*하이브리드 앱, 네이티브 앱 만들어보면서 페이지 전환효과의 중요성을 알게됐음
그래서 필요한 페이지 전환효과를 찾아봄
목표
1. page1, page2, page3은 슬라이드 전환
2. 목표1, page4, page5는 fade 전환
모듈설치
npm install --save vue-router
npm install jquery --save
npm i -g npm-check-updates
App.vue
<template>
<div id="app">
<nav>
<router-link :to="{name: 'page1'}">Slide Page</router-link>
<router-link :to="{name: 'page4'}">New Page 1</router-link>
<router-link :to="{name: 'page5'}">New Page 2</router-link>
</nav>
<main>
<transition :name="transitionName">
<router-view />
</transition>
</main>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
transitionName: ""
};
},
watch: {
$route(to, from) {
if(to.meta.page == null || from.meta.page == null){
this.transitionName = "fade";
}else{
this.transitionName = to.meta.page > from.meta.page ? "next" : "prev";
}
console.log(this.transitionName);
}
}
};
</script>
<style>
* { box-sizing: border-box; }
html, body { height: 100%; margin:0; padding:0; }
#app { display: grid; grid-template-rows: min-content; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #FAFAFA; }
nav { display: flex; align-items: center; justify-content: space-around; background-color: #424242; position: sticky; bottom: 0; z-index: 1; }
a { color: white; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 1em 0; margin: 0 1em; border-bottom: 2px solid transparent; }
a.router-link-exact-active { border-color: inherit; }
main h1{ color:black; }
main { min-height: 100%; display: grid; grid-template: "main"; flex: 1; background-color: white; position: relative; z-index: 0; overflow-x: hidden; }
main > * { grid-area: main; background-color: white; position: relative; }
main > :first-child { z-index: 1; }
/* 전환효과 (Slide) */
.next-leave-to { animation: leaveToLeft 500ms both cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 0; }
.next-enter-to { animation: enterFromRight 500ms both cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 1; }
.prev-leave-to { animation: leaveToRight 500ms both cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 1; }
.prev-enter-to { animation: enterFromLeft 500ms both cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 0; }
@keyframes leaveToLeft { from { transform: translateX(0); } to { transform: translateX(-25%); filter: brightness(0.5); } }
@keyframes enterFromLeft { from { transform: translateX(-25%); filter: brightness(0.5); } to { transform: translateX(0); } }
@keyframes leaveToRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes enterFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* 전환효과 (Fade) */
.fade-enter-active, .fade-leave-active { transition: opacity .8s; }
.fade-enter, .fade-leave-to { opacity: 0; }
</style>
page1.vue
<template>
<section>
<h1>SLIDE 1</h1>
<button>
<router-link :to="{name: 'page2'}">next</router-link>
</button>
</section>
</template>
<style scoped>
a{ color:black; }
section { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: Lightyellow; }
</style>
page2.vue
<template>
<section>
<h1>SLIDE 2</h1>
<div>
<button>
<router-link :to="{name: 'page1'}">prev</router-link>
</button>
<button>
<router-link :to="{name: 'page3'}">next</router-link>
</button>
</div>
</section>
</template>
<style scoped>
button{ margin:0 10px; }
a{ color:black; }
section { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: Lightblue; }
</style>
page3.vue
<template>
<section>
<h1>SLIDE 3</h1>
<button>
<router-link :to="{name: 'page2'}">prev</router-link>
</button>
</section>
</template>
<style scoped>
a{ color:black; }
section { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: LightGreen; }
</style>
page4.vue
<template>
<section>
<h1>NEW PAGE 1</h1>
</section>
</template>
<style scoped>
section { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: Lightgray; }
</style>
page5.vue
<template>
<section>
<h1>NEW PAGE 2</h1>
</section>
</template>
<style scoped>
section { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #CEECF5; }
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
route.js
import Vue from "vue";
import Router from "vue-router";
import Page1 from "./views/page1";
import Page2 from "./views/page2";
import Page3 from "./views/page3";
import Page4 from "./views/page4";
import Page5 from "./views/page5";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/",
name: "page1",
component: Page1,
meta: {
page: 1
}
},
{
path: "/page2",
name: "page2",
component: Page2,
meta: {
page: 2
}
},
{
path: "/page3",
name: "page3",
component: Page3,
meta: {
page: 3
}
},
{
path: "/page4",
name: "page4",
component: Page4,
transitionName: 'fade'
},
{
path: "/page5",
name: "page5",
component: Page5,
transitionName: 'fade'
}
]
});
Result
728x90
반응형
'Javascript' 카테고리의 다른 글
웹 에디터(Summernote) 셋팅 및 이미지 업로드(With PHP) (8) | 2021.06.23 |
---|---|
[Javascript] 날짜의 차이를 퍼센트로 구하기 (0) | 2021.06.14 |
[Vue js 반응형 웹페이지] 우측 슬라이드메뉴 (0) | 2021.05.07 |
[Vue js 반응형 웹페이지] 페이지구성 + Router 설정 (0) | 2021.05.07 |
IntelliJ + Vue 개발환경 구성 (0) | 2021.04.14 |
댓글