From 4053768474a10cd3c660dbd0f82d54e9b6aac0c4 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 14 Mar 2018 10:30:51 +0100
Subject: [PATCH] [css.container.cards(section)] animation on display

---
 webpack/component/teacher/view.vue |  2 +-
 webpack/component/ue/view.vue      |  2 +-
 webpack/scss/container.scss        | 10 ++++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue
index 384a8f6..f0b94f2 100644
--- a/webpack/component/teacher/view.vue
+++ b/webpack/component/teacher/view.vue
@@ -46,7 +46,7 @@
 				</div>
 			</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'
 				:class="gstore.edit_i==pi ? 'search' : ''"
diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue
index 6449dd3..00d549f 100644
--- a/webpack/component/ue/view.vue
+++ b/webpack/component/ue/view.vue
@@ -35,7 +35,7 @@
 				</div>
 			</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'
 				:class="gstore.edit_i==pi ? 'search' : ''"
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index f68b919..5d51e8b 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -144,6 +144,11 @@
 
 	}
 
+	@keyframes showup{
+		from{ transform: scale(.95); }
+		to{   transform: scale(1);  }
+	}
+
 	/* (1) Card container */
 	& > section{
 
@@ -159,6 +164,11 @@
 		border: 1px solid transparent;
 		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; }
 		&.valid{   box-shadow: 0; border: 1px solid $form-valid-color; }
 		&.search{  box-shadow: 0; border: 1px solid $form-search-color; }