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

[webpack.ue.view][webpack.ue.manage] created 'nav_in' base animation (subtle)

This commit is contained in:
xdrm-brackets 2018-03-13 15:43:43 +01:00
parent e0d4c278f4
commit b85a158078
4 changed files with 23 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,37 +4,7 @@
<div class='card container'> <div class='card container'>
<section data-anim-incoming='1'>
<section class='valid' data-create='' v-show='gstore.create_card'>
<select class='category' v-model='gstore.create_cat'>
<option selected='selected' disabled='disabled' value='-'>Catégorie d'enseignant</option>
<option v-for='cat in gstore.categories' :value='cat.idCategorie'>{{ cat.labelCategorie }}</option>
</select>
<h1>
<input type='text' placeholder='Prénom Nom' v-model='gstore.create_name'>
<span data-visible='1'>(<input type='text' placeholder='identifiant' v-model='gstore.create_cas'>)</span>
</h1>
<div class='table'>
<div>
<span><input type='text' placeholder='???' v-model='gstore.create_h'></span>
<span>heures à faire</span>
</div>
</div>
<div :class="gstore.create_err.length > 0 ? 'sub warning' : 'sub'" :data-valid='gstore.create_err_valid?1:0'>{{ gstore.create_err }}</div>
<div class='footer'>
<button class='valid' @click='gstore.ic_handler()'>Créer l'enseignant</button>
</div>
</section>
<section>
<h1 >{{ $route.params.code }}</h1> <h1 >{{ $route.params.code }}</h1>

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

@ -40,8 +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-center='gstore.open_anim.center == pi ? 1 : 0' :data-anim-outgoing='gstore.open_anim.fade < 0 ? 0 : 1'
:data-anim-scale='gstore.open_anim.scale == pi ? 1 : 0'
:data-label='ue.label'> :data-label='ue.label'>

17
webpack/data/ue.js
View File

@ -518,8 +518,7 @@ gstore.add('ia_handler', function(ue_i){
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Initialize current opened UE */ /* (1) Initialize current opened UE */
gstore.add('open_anim', { gstore.add('open_anim', {
center: -1, fade: -1
scale: -1
}); });
/* (2) Define admin handler */ /* (2) Define admin handler */
@ -529,24 +528,20 @@ gstore.add('nav_in', function($router, 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 center */ /* (2) Set element to fade others */
gstore.get.open_anim.center = ue_i; gstore.get.open_anim.fade = ue_i;
/* (3) Scale element */ /* (3) Scale element */
(new Promise((resolve,reject) => { (new Promise((resolve,reject) => {
setTimeout(() => { setTimeout(() => {
gstore.get.open_anim.scale = ue_i; $router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
resolve(); gstore.get.open_anim.fade = -1;
}, 500 ); }, 500 );
/* (4) Load page */ /* (4) Load page */
})).then(() => { })).then(() => {
setTimeout(() => { console.log('blu');
$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
gstore.get.open_anim.center = -1;
gstore.get.open_anim.scale = -1;
}, 400);
}); });

35
webpack/scss/container.scss
View File

@ -164,32 +164,23 @@
&.valid{ box-shadow: 0; border: 1px solid $form-valid-color; } &.valid{ box-shadow: 0; border: 1px solid $form-valid-color; }
&.search{ box-shadow: 0; border: 1px solid $form-search-color; } &.search{ box-shadow: 0; border: 1px solid $form-search-color; }
// animation to center of container // animation for incoming element
&[data-anim-center='1']{ @keyframes incoming{
position: absolute; from{ transform: translateY(-2em); opacity: 0; }
top: 50%; to{ transform: translateY(0); opacity: 1; }
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(1);
padding: 1.5em;
border: 1px solid #bbb;
box-shadow: 0 0 5vw #ddd;
z-index: 103;
transition: transform .2s ease-in-out,
padding .4s ease-in-out;
// animation to scale to container
&[data-anim-scale='1']{
padding: 10em;
transform: translateX(-50%) translateY(-50%) scale(1.5);
} }
// animation for outgoing element
@keyframes outgoing{
from{ transform: translateY(0); opacity: 1; }
to{ transform: translateY(2em); opacity: 0; }
} }
// animation to nav in
&[data-anim-outgoing='1']{ animation: outgoing .4s ease-in-out; }
&[data-anim-incoming='1']{ animation: incoming .4s ease-in-out; }
background-color: #fff; background-color: #fff;
color: $primary-color; color: $primary-color;