mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webpack.ue.*] manage navigation (2-ways)

This commit is contained in:
xdrm-brackets 2018-03-14 12:12:32 +01:00
parent 561fce6449
commit 496c0ba529
4 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webpack/component/ue/manage.vue
View File

@ -4,12 +4,14 @@
<div class='card container'> <div class='card container'>
<section data-anim-incoming='1'> <section
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
<h1 >{{ $route.params.code }}</h1> <h1 >{{ $route.params.code }}</h1>
<div class='footer'> <div class='footer'>
<button class='neutral' @click='$router.push(`/ue/view`)'>Retour</button> <button class='neutral' @click='gstore.nav_out($router)'>Retour</button>
</div> </div>
</section> </section>

2
webpack/component/ue/view.vue
View File

@ -40,7 +40,7 @@
<section v-for='(ue, pi) in gstore.ues' <section v-for='(ue, pi) in gstore.ues'
:class="gstore.edit_i==pi ? 'search' : ''" :class="gstore.edit_i==pi ? 'search' : ''"
:data-id='ue.code' :data-id='ue.code'
:data-anim-outgoing='gstore.open_anim.fade < 0 ? 0 : 1' :data-anim-outgoing='gstore.nav_anim.in?1:0'
:data-label='ue.label'> :data-label='ue.label'>

48
webpack/data/ue.js
View File

@ -539,36 +539,52 @@ gstore.add('ia_handler', function(ue_i){
/* (9) Manage navigation in /* (9) Manage navigation
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Initialize current opened UE */ /* (1) Initialize current opened UE */
gstore.add('open_anim', { gstore.add('nav_anim', {
fade: -1 in: false,
out: false
}); });
/* (2) Define admin handler */ /* (2) Manage nav in */
gstore.add('nav_in', function($router, ue_i){ gstore.add('nav_in', function($router, ue_i){
/* (1) Abort if wrong ue_i */ /* (1) Abort if wrong ue_i */
if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null) if( ue_i == null || isNaN(ue_i) || gstore.get.ues[ue_i] == null)
return; return;
/* (2) Set element to fade others */ /* (2) Set animation class */
gstore.get.open_anim.fade = ue_i; gstore.get.nav_anim.in = true;
/* (3) Scale element */ setTimeout( () => {
(new Promise((resolve,reject) => {
setTimeout(() => {
$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
gstore.get.open_anim.fade = -1;
}, 500 );
/* (4) Load page */ /* (3) Load page */
})).then(() => { $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 );
}); });

13
webpack/scss/container.scss
View File

@ -144,7 +144,7 @@
} }
@keyframes showup{ @keyframes bounce-up{
from{ transform: scale(.95); } from{ transform: scale(.95); }
to{ transform: scale(1); } to{ transform: scale(1); }
} }
@ -164,8 +164,9 @@
border: 1px solid transparent; border: 1px solid transparent;
box-shadow: 0 1px 1px darken(#fff, 20%); box-shadow: 0 1px 1px darken(#fff, 20%);
&:not([data-anim='0']){ &:not([data-anim='0']),
animation: showup .2s ease-out; &:not([data-anim-incoming='1']){
animation: bounce-up .2s ease-out;
} }
@ -182,13 +183,15 @@
// animation for outgoing element // animation for outgoing element
@keyframes outgoing{ @keyframes outgoing{
from{ transform: translateY(0); opacity: 1; } from{ transform: translateY(0); opacity: 1; }
to{ transform: translateY(2em); opacity: 0; } to{ transform: translateY(2em); opacity: 0; }
} }
// animation to nav in // 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-incoming='1']{ animation: incoming .4s ease-in-out; }
&[data-anim-bounce='1']{ animation: bounce-up .6s ease-in-out reverse forwards; }
background-color: #fff; background-color: #fff;