Permalink
Browse files

添加根路由切换过渡动画

  • Loading branch information...
1 parent a215708 commit 772c28f2ac7bd05887f9a37e375a546d5a20b547 @leenty committed Jan 4, 2017
View
@@ -5,20 +5,25 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>vue2.0-demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
-
- <meta name="apple-mobile-web-app-capable" content="yes" />
+ <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
+ <!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
<!-- <meta name="x5-fullscreen" content="true"> -->
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="leenty | vue2.0 vue+vue-router+vuex Material-theme">
+ <meta name="Keywords" content="leenty, vuejs, vue-router, vuex, 前端">
+ <meta name="author" content="leenty">
+
<meta property="og:type" content="website">
<meta property="og:title" content="leenty | vue2.0-demo">
<meta property="og:url" content="leenty | vue2.0 vue+vue-router+vuex Material-theme">
<meta property="og:site_name" content="leenty | vue2.0-demo">
<meta property="og:description" content="leenty | vue2.0 vue+vue-router+vuex Material-theme">
- <meta name="twitter:card" content="summary">
+
+ <meta name="twitter:card" content="leenty">
<meta name="twitter:title" content="leenty | vue2.0-demo">
<meta name="twitter:description" content="leenty | vue2.0 vue+vue-router+vuex Material-theme">
+
+ <meta name="renderer" content="webkit">
<link rel="stylesheet" href="//cdn.bootcss.com/normalize/4.2.0/normalize.min.css">
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
</head>
View
@@ -7,8 +7,10 @@
@scroll="pushScrollData"
).l-page--Full
home-header
- .app__bodyer.l-mH--auto
- router-view
+ .app__bodyer.l-mH--auto.u-clearfix
+ transition(name="slideFade")
+ router-view
+ //- ,mode="out-in"
include ./assets/svg/all
</template>
@@ -69,7 +71,26 @@
.app__bodyer
max-width max-width
background-color c-bgc
+ position relative
@media screen and (max-width: max-width)
.app__bodyer
padding 0 10px
+ .slideFade-enter-active,
+ .slideFade-leave-active
+ left 10px
+ .slideFade-enter-active,
+ .slideFade-leave-active
+ transition all .5s cb-duang
+ width 100%
+ position absolute
+ top 0
+ left 0
+ opacity 1
+ .slideFade-enter
+ transform translateX(100%) scale(.3)
+ opacity 0
+ .slideFade-leave-active
+ transform translateX(-100%) scale(.3)
+ opacity 0
+
</style>
@@ -9,3 +9,16 @@
transform translateY(0)
}
}
+
+@keyframes scaleOut {
+ 100% {
+ opacity 0
+ transform scale(.6)
+ }
+}
+@keyframes scaleIn {
+ 0% {
+ opacity 0
+ transform scale(.6)
+ }
+}
@@ -2,6 +2,7 @@
max-width = 1000px
/*** grid ***/
+min = 320px // -∞ ~ 320px
mobile = 500px // 320px ~ 500px
pad = 768px // 768px ~ 992px
laptop = 992px // 992px ~ 1200px
@@ -1,6 +1,6 @@
<template lang="pug">
.flexGrid
- h1 flexGrid
+ h1 flexGrid 研究中...
h3.l-mt20 dom: .fg-row
.flexGrid__bg.fg-row
.fg-24 .fg-24
@@ -1,6 +1,6 @@
<template lang="pug">
.articleList(:class="{'articleList--Active': articleList}").l-page--Full
- .articleList__nav
+ //- .articleList__nav
.articleList__title
svg.svg__code
use(xlink:href="#svg__code")
View
@@ -2,7 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
-const title = 'leenty blog'
+const title = 'leenty blog Demo'
Vue.use(VueRouter)

0 comments on commit 772c28f

Please sign in to comment.