├── .gitignore
├── demo.rar
├── index.html
├── main.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/demo.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vingojw/vue-transition/86edde0db9b46736a405f5942a53ec94462b2d0d/demo.rar
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
183 |
184 |
185 |
186 |
193 |
194 |
195 |
196 |
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
首页
'
4 | })
5 |
6 | var page2 = Vue.extend({
7 | template: '页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
页面二
'
8 | })
9 |
10 | var page3 = Vue.extend({
11 | template: '页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
页面三
'
12 | })
13 |
14 | var page4 = Vue.extend({
15 | template: '页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
页面四
'
16 | })
17 |
18 | var page5 = Vue.extend({
19 | template: '页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
页面五
'
20 | })
21 |
22 |
23 | var App = Vue.extend({
24 | data:function(){
25 | return {
26 | effect:'next',
27 | changePage:false
28 | }
29 | }
30 | })
31 |
32 |
33 | var router = new VueRouter();
34 |
35 |
36 | //过渡代码放到最下面的时候，有时候并不会执行钩子函数的方法，放到这里就可以了。
37 | Vue.transition('next', {
38 | beforeEnter: function (el) {
39 | router.app.changePage = true;
40 | },
41 | enter:function(){
42 | },
43 | afterEnter: function (el) {
44 | router.app.changePage = false;
45 | }
46 | });
47 | Vue.transition('prev', {
48 | beforeEnter: function (el) {
49 | router.app.changePage = true;
50 | },
51 | enter:function(){
52 | },
53 | afterEnter: function (el) {
54 | router.app.changePage = false;
55 | }
56 | });
57 |
58 | router.map({
59 | '/': {
60 | name:'home',
61 | component: home
62 | },
63 | '/page2': {
64 | name:'page2',
65 | component: page2
66 | },
67 | '/page3': {
68 | name:'page3',
69 | component: page3
70 | },
71 | '/page4': {
72 | name:'page4',
73 | component: page4
74 | },
75 | '/page5': {
76 | name:'page5',
77 | component: page5
78 | }
79 | })
80 |
81 | //全局放一个routlist
82 |
83 | window.routeList = [];
84 | router.beforeEach(function(transition){
85 | if(routeList.length > 1 && transition.to.name==routeList[routeList.length-2]){
86 | router.app.effect='prev';//返回
87 | routeList.splice(routeList.length-1,1);
88 | setTimeout(function(){
89 | //这里加上延迟是要在afterEach之后在执行
90 | transition.next()
91 | },15);
92 | return;
93 | }
94 | router.app.effect='next';//前进
95 | routeList.push(transition.to.name);
96 | transition.next();
97 | });
98 |
99 | router.afterEach(function(transition){
100 | //这里必须要加上， 此钩子函数会在beforeEach之后马上执行,没有这句会导致
101 | //当你浏览顺序为，首页->页面二->页面三
102 | //此时点击页面二正常返回，然后再次选择页面三，本应该是前进，结果还是返回。
103 | router.app.effect='next';//重置前进
104 | });
105 |
106 | router.start(App, '#app');
107 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "asset",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "main.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "devDependencies": {
12 | "vue": "^1.0.17",
13 | "vue-router": "^0.7.11"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------