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

[css.container.cards(section)] animation on display

This commit is contained in:
xdrm-brackets 2018-03-14 10:30:51 +01:00
parent a827e66ba1
commit 4053768474
3 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,7 @@
</div> </div>
</section> </section>
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section> <section v-if='gstore.professors.length <= 0' data-anim='0'>Aucun enseignant trouvé</section>
<section v-for='(prof, pi) in gstore.professors' <section v-for='(prof, pi) in gstore.professors'
:class="gstore.edit_i==pi ? 'search' : ''" :class="gstore.edit_i==pi ? 'search' : ''"

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

@ -35,7 +35,7 @@
</div> </div>
</section> </section>
<section v-if='gstore.ues.length <= 0'>Aucune UE trouvée</section> <section v-if='gstore.ues.length <= 0' data-anim='0'>Aucune UE trouvée</section>
<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' : ''"

10
webpack/scss/container.scss
View File

@ -144,6 +144,11 @@
} }
@keyframes showup{
from{ transform: scale(.95); }
to{ transform: scale(1); }
}
/* (1) Card container */ /* (1) Card container */
& > section{ & > section{
@ -159,6 +164,11 @@
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']){
animation: showup .2s ease-out;
}
&.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; } &.invalid{ box-shadow: 0; border: 1px solid $form-invalid-color; }
&.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; }