feat(Panel): add animation when clicking "commencer sélection" in forms for tags

Author: dewita

assets/css/_panel.scss

@@ -11,7 +11,18 @@
   border-radius: 4px;
   background-color: white;
   @include box-shadow($SHADOW);
-  overflow: hidden;
+
+  &::before{
+    content: "";
+    border-radius: 4px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include box-shadow($SHADOW_EXPANDED);
+    opacity: 0;
+  }
 
   .panel-wrapper {
     height: calc(100% - 50px);
@@ -28,3 +39,21 @@
     }
   }
 }
+
+.animatePanel  {
+  &::before {
+    animation: bounce infinite ease;
+    animation-duration: 1.5s;
+  }
+}
+
+@keyframes bounce {
+  from, 50%, to {
+    opacity: 0;
+  }
+
+  25%, 75% {
+    opacity: 1;
+  }
+}
+

assets/css/_variables.scss

@@ -63,6 +63,7 @@ $LINEAR_GRADIENT_ORANGE: linear-gradient(to right, #eea849, #f46b45);
  */
 
 $SHADOW: 0 0 15px 0 rgba(0, 0, 0, 0.15);
+$SHADOW_EXPANDED: 0 0 30px 0 rgba(0, 0, 0, 0.24);
 $SHADOW_BOTTOM:0 12px 15px -15px rgba(0, 0, 0, 0.15);
 
 /*

components/Panel/Item/DetailsPanel.vue

@@ -41,7 +41,7 @@
      * The exercise containing details, tags,...
      */
     @Prop({type: Object, required: true}) exercise!: Exercise;
-    
+
     /**
      * Classify all tags by categories and sorts the categories
      */
@@ -80,7 +80,7 @@
   @import "assets/css/font";
 
   #DetailsPanel {
-
+    position: relative;
     padding: 20px;
 
     h4 {

components/Panel/Item/ExercisesCheckPanel.vue

@@ -107,6 +107,7 @@
 
   #ExercisesCheckPanel {
     padding: 20px 0;
+    position: relative;
 
     .results {
       padding: 0 20px;

components/Panel/Item/FavoritePanel.vue

@@ -157,6 +157,8 @@
 
   #FavoritePanel {
     padding: 0;
+    position: relative;
+
 
     .disclaimer {
       padding: 0 20px;

components/Panel/Item/HistoricalPanel.vue

@@ -114,6 +114,7 @@
 
   #HistoricalPanel {
     padding: 0 0 20px;
+    position: relative;
 
     h3 {
       padding-left: 20px;

components/Panel/Panel.vue

@@ -101,7 +101,16 @@
       });
 
       BusEvent.$on('changePanel', (id: number) => {
-        this.changePanel(id)
+        this.changePanel(id);
+
+        const classList: DOMTokenList = this.$el.classList;
+
+        if(!classList.contains("animatePanel")) {
+          this.$el.classList.add("animatePanel");
+          setTimeout(() => {
+            this.$el.classList.remove("animatePanel");
+          }, 1500);
+        }
       })
     }
 
@@ -124,6 +133,7 @@
       right: 0;
       z-index: 1000;
       display: flex;
+      border-radius: 4px 4px 0 0;
       width: 100%;
       justify-content: stretch;
       overflow: hidden;