[webpack.ue.view][webpack.ue.manage] created 'nav_in' base animation (subtle)
This commit is contained in:
parent
e0d4c278f4
commit
b85a158078
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue