light transition on dropdown & overlay

assets/sass/_theme/_configuration.sass

@@ -76,9 +76,13 @@ $header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à p
 $header-background-color: $main-background-color !default
 $header-sticky-enabled: true !default
 $header-sticky-transition: 0.3s !default
+$header-dropdown-transition: 0.3s !default
 $header-height: 61px !default
 $header-height-md: 74px !default
 
+// Navs
+$body-overlay-color: rgba(0, 0, 0, 0.3) !default
+
 // Footer
 $footer-color: $main-color !default
 $footer-background-color: darken($main-background-color, 2.5) !default

assets/sass/_theme/design-system/layout.sass

@@ -12,14 +12,7 @@ body
     &:not(.is-loaded)
         *
             transition-duration: 0s !important
-    html.has-menu-opened &
-        &::after
-            background-color: rgba(0,0,0,.3)
-            content: ""
-            display: block
-            inset: 82px 0 0 0
-            position: fixed
-            z-index: $zindex-body-overlay
+
 
 main
     // Create padding-top for fixed header under md

assets/sass/_theme/design-system/nav.sass

+@keyframes showIn
+    0%
+        opacity: 0
+    100%
+        opacity: 1
+    0%
+        opacity: 0
+
 .menu
     @include media-breakpoint-down(md)
         -webkit-flex-basis: 100vw
@@ -49,12 +57,15 @@
         li.has-children
             a[aria-expanded="true"] + .dropdown-menu
                 display: block
+                animation-duration: $header-dropdown-transition
+                animation-fill-mode: both
+                animation-name: showIn
 
     .nav-level-2
         @include grid(1)
         @include media-breakpoint-up(md)
             @include container
-            @include grid(4, md)            
+            @include grid(4, md)
         > li
             &,
             & > a,
@@ -100,6 +111,21 @@
                         + .dropdown-menu
                             display: block
 
+body
+    &::after
+        background-color: $body-overlay-color
+        content: ""
+        display: none
+        inset: 82px 0 0 0
+        position: fixed
+        z-index: $zindex-body-overlay
+    html.has-menu-opened &
+        &::after
+            display: block
+            animation-duration: $header-dropdown-transition
+            animation-fill-mode: both
+            animation-name: showIn
+
 .share
     display: flex
     list-style: none