diff --git a/webpack/component/ue/manage.vue b/webpack/component/ue/manage.vue index 32f4db3..9e08da6 100644 --- a/webpack/component/ue/manage.vue +++ b/webpack/component/ue/manage.vue @@ -4,12 +4,14 @@
-
+

{{ $route.params.code }}

diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue index 00d549f..fee4744 100644 --- a/webpack/component/ue/view.vue +++ b/webpack/component/ue/view.vue @@ -40,7 +40,7 @@
diff --git a/webpack/data/ue.js b/webpack/data/ue.js index d364a1c..81a3589 100644 --- a/webpack/data/ue.js +++ b/webpack/data/ue.js @@ -539,36 +539,52 @@ gstore.add('ia_handler', function(ue_i){ -/* (9) Manage navigation in +/* (9) Manage navigation ---------------------------------------------------------*/ /* (1) Initialize current opened UE */ -gstore.add('open_anim', { - fade: -1 +gstore.add('nav_anim', { + in: false, + out: false }); -/* (2) Define admin handler */ +/* (2) Manage nav in */ gstore.add('nav_in', function($router, ue_i){ /* (1) Abort if wrong ue_i */ if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null) return; - /* (2) Set element to fade others */ - gstore.get.open_anim.fade = ue_i; + /* (2) Set animation class */ + gstore.get.nav_anim.in = true; - /* (3) Scale element */ - (new Promise((resolve,reject) => { - setTimeout(() => { - $router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`); - gstore.get.open_anim.fade = -1; - }, 500 ); + setTimeout( () => { - /* (4) Load page */ - })).then(() => { + /* (3) Load page */ + $router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`); - console.log('blu'); + /* (4) Remove animation class */ + gstore.get.nav_anim.in = false; - }); + }, 500 ); + + +}); + +/* (3) Manage nav out */ +gstore.add('nav_out', function($router){ + + /* (1) Set animation class */ + gstore.get.nav_anim.out = true; + + setTimeout( () => { + + /* (2) Load page */ + $router.push(`/ue/view/`); + + /* (3) Remove animation class */ + gstore.get.nav_anim.out = false; + + }, 500 ); }); \ No newline at end of file diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index a7824ee..5cb3c32 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -144,7 +144,7 @@ } - @keyframes showup{ + @keyframes bounce-up{ from{ transform: scale(.95); } to{ transform: scale(1); } } @@ -164,8 +164,9 @@ border: 1px solid transparent; box-shadow: 0 1px 1px darken(#fff, 20%); - &:not([data-anim='0']){ - animation: showup .2s ease-out; + &:not([data-anim='0']), + &:not([data-anim-incoming='1']){ + animation: bounce-up .2s ease-out; } @@ -182,13 +183,15 @@ // animation for outgoing element @keyframes outgoing{ from{ transform: translateY(0); opacity: 1; } - to{ transform: translateY(2em); opacity: 0; } + to{ transform: translateY(2em); opacity: 0; } } // animation to nav in - &[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out; } + &[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out forwards; } &[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; } + &[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; } + background-color: #fff;