Permalink
Browse files

导航栏动效

  • Loading branch information...
1 parent db183f2 commit 2cd13b5849ae34f2607ea655fb7cd819bc2ab771 @leenty committed Nov 23, 2016
Submodule .deploy_coding added at c85051
View
@@ -6,3 +6,4 @@ test/unit/coverage
test/e2e/reports
selenium-debug.log
.deploy
+.deploy_coding
View
@@ -1,5 +1,7 @@
# vue2.0-demo
捣鼓捣鼓vue2.0
+使用 Material 风格
+后面会加入大量微动效
# 当前css规则
```
View
@@ -23,15 +23,29 @@ Date.prototype.format = function(fmt) {
const deployName = new Date().format("yyyy-MM-dd hh:mm:ss")
-let spinner = ora(`building and deploy at ${deployName}`)
-spinner.start()
+// const repertoryUrl = 'git@git.coding.net:leenty/vue2.leenty.com.git'
+// cd('.deploy')
+// exec(`git remote origin set-url ${repertoryUrl}`)
+// const checkoutRepertory = function () {
+// exec(`git clone -b git@github.com:leenty/vue2.git gh-pages`)
+// // git clone -b <branch name> [remote repository address]
+// }
-rm('-rf', ['.deploy/CNAME', '.deploy/index.html', '.deploy/static'])
-cp('-R', ['dist/CNAME', 'dist/index.html', 'dist/static', '.deploy'])
-cd('.deploy')
-exec('git add .')
-exec(`git cm -m "deploy at ${deployName}"`)
-exec('git pull --rebase origin gh-pages')
-exec('git push origin gh-pages')
+const deploy = function (dir, branch) {
+ let spinner = ora(`building and deploy at ${deployName}`)
+ spinner.start()
-spinner.stop()
+ rm('-rf', [`${dir}/CNAME`, `${dir}/index.html`, `${dir}/static`])
+ cp('-R', ['dist/CNAME', 'dist/index.html', 'dist/static', dir])
+ cd(dir)
+ exec('git add .')
+ exec(`git cm -m "deploy at ${deployName}"`)
+ exec(`git pull --rebase origin ${branch}`)
+ exec(`git push origin ${branch}`)
+ cd('..')
+
+ spinner.stop()
+ console.log('/n')
+}
+deploy('.deploy', 'gh-pages')
+deploy('.deploy_coding', 'master')
View
@@ -2,8 +2,23 @@
<html>
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+ <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="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 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:title" content="leenty | vue2.0-demo">
+ <meta name="twitter:description" content="leenty | vue2.0 vue+vue-router+vuex Material-theme">
<link rel="stylesheet" href="//cdn.bootcss.com/normalize/4.2.0/normalize.min.css">
</head>
<body>
View
@@ -1,7 +1,7 @@
{
"name": "vue2.0-demo",
"version": "1.0.0",
- "description": "A Vue.js project",
+ "description": "vue2.0 and use material style",
"author": "leenty <leenty@qq.com>",
"private": true,
"scripts": {
View
@@ -3,7 +3,8 @@
include ./assets/svg/all
app-article-list
.app__content(
- :class="{'app__content--Active': articleList}"
+ :class="{'app__content--Active': articleList}",
+ @scroll="pushScrollData"
).l-page--Full
home-header
.app__bodyer
@@ -13,7 +14,8 @@
<script>
import HomeHeader from './components/templates/HomeHeader.vue'
import AppArticleList from './components/templates/AppArticleList.vue'
- import { mapGetters } from 'vuex'
+ import { mapGetters, mapActions } from 'vuex'
+ // import fullScreen from './utils/fullScreen'
export default {
data () {
return {
@@ -26,13 +28,21 @@
computed: mapGetters([
'articleList'
]),
- ready () {
- console.log('test')
- console.log(document.querySelector('.app__content'))
- document.querySelector('.app__content').addEventListener('scroll', function (e) {
- console.log(e)
- })
- }
+ methods: mapActions([
+ 'pushScrollData'
+ ])
+ // created () {
+ // console.log('test')
+ // fullScreen()
+ // }
+ // ready () {
+ // console.log('test')
+ // console.log(document.querySelector('.app__content'))
+ // document.querySelector('.app__content')
+ // .addEventListener('scroll', e => {
+ // console.log(e)
+ // })
+ // }
}
</script>
@@ -22,7 +22,7 @@ button
left 0
top 11px
border-radius 3px
- transition all .5s
+ transition all .5s cb-duang
transform-origin 50% 50%
&:before
transform translateY(-6px)
@@ -12,3 +12,6 @@ c-ff = #fff
// size
s-articleList = 200px
+
+// cubic-bezier
+cb-duang = cubic-bezier(0.66, 0.1, 0.38, 1.45)
@@ -57,7 +57,7 @@ export default {
color #fff
.articleList__li
transform translateX(-(s-articleList))
- transition transform .3s cubic-bezier(0.8, 0.02, 0.45, 0.91) .2s
+ transition transform .3s cb-duang .2s
.articleList__link
display block
width 100%
@@ -1,19 +1,22 @@
<template lang="pug">
- header.header.u-clearfix
- .header__listSwitch.l-pt10.l-pl10
- button(
- @click="articleListSwitch",
- :class="{'b-menu--Active': articleList}"
- ).b-menu
- .header__menu.u-boxShadow.l-flexH--sa
- router-link(to="/", exact).u-link.header__link.l-flexV--c
- svg.svg__home
- use(xlink:href="#svg__home")
- span home
- router-link(to="/article").u-link.header__link.l-flexV--c
- svg.svg__code
- use(xlink:href="#svg__code")
- span article
+ header(
+ :class="{'header--scroll': isScrollDown}"
+ ).header.u-clearfix
+ .header__content
+ .header__listSwitch.l-pt10.l-pl10
+ button(
+ @click="articleListSwitch",
+ :class="{'b-menu--Active': articleList}"
+ ).b-menu
+ .header__menu.u-boxShadow.l-flexH--sa
+ router-link(to="/", exact).u-link.header__link.l-flexV--c
+ svg.svg__home
+ use(xlink:href="#svg__home")
+ span home
+ router-link(to="/article").u-link.header__link.l-flexV--c
+ svg.svg__code
+ use(xlink:href="#svg__code")
+ span article
</template>
<script>
@@ -34,7 +37,8 @@ export default {
]),
// 这是直接获得state的数据,也就是相当于旧版本vuex的getter函数
...mapState({
- test: ({status}) => status.test
+ test: ({status}) => status.test,
+ isScrollDown: ({status}) => status.scroll.scrollTop > 0
})
},
// computed: mapState({
@@ -54,21 +58,46 @@ export default {
<style lang="stylus">
@import '../../assets/stylus/preinstall'
.header
- background-color c-master
height 160px
margin-bottom 60px
+ transition all .5s cb-duang
position relative
+ .header__content
+ top 0
+ left 0
+ position fixed
+ width 100%
+ background-color c-master
.header__menu
max-width max-width
background-color c-ff
margin 90px auto 0
height 120px
+ transition all .5s cb-duang
.header__link
- height 80px
width 80px
+ height @width
+ // transition all .5s cb-duang
+ // transition-property width
.header__listSwitch
position absolute
width 100%
left 0
top 0
+ box-sizing border-box
+ .header--scroll
+ height 50px
+ margin-bottom 20px
+ .header__menu
+ // margin-top 45px
+ margin-top 0
+ max-width 100%
+ height 50px
+ background-color transparent
+ .header__link
+ color rgba(255,255,255,.6)
+ width 50px
+ height @width
+ .u-link--Active
+ color #fff
</style>
@@ -1,8 +1,16 @@
import * as types from '../types'
+import getScrollData from '../../utils/scroll'
+
const state = {
articleList: false,
- test: 123
+ test: 123,
+ scroll: {
+ scrollTop: -1,
+ scrollHeight: -1,
+ windowHeight: -1,
+ scrollBottom: -1
+ }
}
const getters = {
@@ -16,12 +24,19 @@ const getters = {
const mutations = {
[types.ARTICLE_LIST] (state) {
state.articleList = !state.articleList
+ },
+ [types.SCROLLDATA] (state, scrollObj) {
+ // console.log(scrollObj)
+ state.scroll = scrollObj
}
}
const actions = {
articleListSwitch ({ commit }) {
commit(types.ARTICLE_LIST)
+ },
+ pushScrollData ({ commit }) {
+ commit(types.SCROLLDATA, getScrollData(), { silent: true })
}
}
View
@@ -1,2 +1,3 @@
export const ARTICLE_LIST = 'ARTICLE_LIST'
export const ARTICLE_LIST_SWITCH = 'ARTICLE_LIST_SWITCH'
+export const SCROLLDATA = 'SCROLLDATA'
@@ -0,0 +1,17 @@
+const fullScreen = function () {
+ var docElm = document.documentElement
+ if (docElm.requestFullscreen) {
+ // W3C
+ docElm.requestFullscreen()
+ } else if (docElm.mozRequestFullScreen) {
+ // FireFox
+ docElm.mozRequestFullScreen()
+ } else if (docElm.webkitRequestFullScreen) {
+ // Chrome等
+ console.log('test')
+ docElm.webkitRequestFullScreen()
+ } else if (docElm.msRequestFullscreen) {
+ docElm.msRequestFullscreen()
+ }
+}
+export default fullScreen
View
@@ -0,0 +1,49 @@
+const selector = '.app__content'
+
+// 滚动条在Y轴上的滚动距离
+function getScrollTop (scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0) {
+ scrollTop = document.querySelector(selector).scrollTop
+ // if (document.body) {
+ // bodyScrollTop = document.body.scrollTop
+ // }
+ // if (document.documentElement) {
+ // documentScrollTop = document.documentElement.scrollTop
+ // }
+ // scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop
+ return scrollTop
+}
+// 文档的总高度
+function getScrollHeight (scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0) {
+ scrollHeight = document.querySelector(selector).scrollHeight
+ // if (document.body) {
+ // bodyScrollHeight = document.body.scrollHeight
+ // }
+ // if (document.documentElement) {
+ // documentScrollHeight = document.documentElement.scrollHeight
+ // }
+ // scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
+ return scrollHeight
+}
+// 浏览器视口的高度
+function getWindowHeight (windowHeight = 0) {
+ if (document.compatMode === 'CSS1Compat') {
+ windowHeight = document.documentElement.clientHeight
+ } else {
+ windowHeight = document.body.clientHeight
+ }
+ return windowHeight
+}
+
+const getScrollData = function () {
+ let scrollTop = getScrollTop()
+ let scrollHeight = getScrollHeight()
+ let windowHeight = getWindowHeight()
+ return {
+ scrollTop,
+ scrollHeight,
+ windowHeight,
+ scrollBottom: scrollHeight - scrollTop - windowHeight
+ }
+}
+
+export default getScrollData

0 comments on commit 2cd13b5

Please sign in to comment.