[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'>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
<section data-anim-incoming='1'>
|
||||
<h1 >{{ $route.params.code }}</h1>
|
||||
|
||||
|
||||
|
|
|
@ -40,8 +40,7 @@
|
|||
<section v-for='(ue, pi) in gstore.ues'
|
||||
:class="gstore.edit_i==pi ? 'search' : ''"
|
||||
:data-id='ue.code'
|
||||
:data-anim-center='gstore.open_anim.center == pi ? 1 : 0'
|
||||
:data-anim-scale='gstore.open_anim.scale == pi ? 1 : 0'
|
||||
:data-anim-outgoing='gstore.open_anim.fade < 0 ? 0 : 1'
|
||||
:data-label='ue.label'>
|
||||
|
||||
|
||||
|
|
|
@ -518,8 +518,7 @@ gstore.add('ia_handler', function(ue_i){
|
|||
---------------------------------------------------------*/
|
||||
/* (1) Initialize current opened UE */
|
||||
gstore.add('open_anim', {
|
||||
center: -1,
|
||||
scale: -1
|
||||
fade: -1
|
||||
});
|
||||
|
||||
/* (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)
|
||||
return;
|
||||
|
||||
/* (2) Set element to center */
|
||||
gstore.get.open_anim.center = ue_i;
|
||||
/* (2) Set element to fade others */
|
||||
gstore.get.open_anim.fade = ue_i;
|
||||
|
||||
/* (3) Scale element */
|
||||
(new Promise((resolve,reject) => {
|
||||
setTimeout(() => {
|
||||
gstore.get.open_anim.scale = ue_i;
|
||||
resolve();
|
||||
$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
|
||||
gstore.get.open_anim.fade = -1;
|
||||
}, 500 );
|
||||
|
||||
/* (4) Load page */
|
||||
})).then(() => {
|
||||
|
||||
setTimeout(() => {
|
||||
$router.push(`/ue/manage/${gstore.get.ues[ue_i].code}`);
|
||||
gstore.get.open_anim.center = -1;
|
||||
gstore.get.open_anim.scale = -1;
|
||||
}, 400);
|
||||
console.log('blu');
|
||||
|
||||
});
|
||||
|
||||
|
|
|
@ -164,32 +164,23 @@
|
|||
&.valid{ box-shadow: 0; border: 1px solid $form-valid-color; }
|
||||
&.search{ box-shadow: 0; border: 1px solid $form-search-color; }
|
||||
|
||||
// animation to center of container
|
||||
&[data-anim-center='1']{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
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 incoming element
|
||||
@keyframes incoming{
|
||||
from{ transform: translateY(-2em); opacity: 0; }
|
||||
to{ transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
color: $primary-color;
|
||||
|
|
Loading…
Reference in New Issue