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'>
<section data-anim-incoming='1'>
<section
data-anim-incoming='1'
:data-anim-bounce='gstore.nav_anim.out?1:0'>
<h1 >{{ $route.params.code }}</h1>
<div class='footer'>
<button class='neutral' @click='$router.push(`/ue/view`)'>Retour</button>
<button class='neutral' @click='gstore.nav_out($router)'>Retour</button>
</div>
</section>

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

@ -40,7 +40,7 @@
<section v-for='(ue, pi) in gstore.ues'
:class="gstore.edit_i==pi ? 'search' : ''"
: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'>

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 */
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 );
});

13
webpack/scss/container.scss
View File

@ -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;