fixed animation

assets/js/theme/design-system/modal.js

 import { focusTrap } from '../utils/focus-trap';
 
 const CLASSES = {
-    modalOpened: 'has-modal-opened'
+    modalOpened: 'has-modal-opened',
+    modalIsOpened: 'is-opened'
 };
 
 class Modal {
@@ -44,7 +45,6 @@ class Modal {
         });
 
         window.addEventListener('click', (event) => {
-            console.log(this.element)
             if (event.target === this.element) {
                 this.toggle(false);
             }
@@ -54,9 +54,14 @@ class Modal {
     toggle(open = !this.state.isOpened) {
         this.state.isOpened = open;
         const classAction = this.state.isOpened ? 'add' : 'remove';
+        let transitionDuration = window.getComputedStyle(this.element).transitionDuration;
+        transitionDuration = parseFloat(transitionDuration.replace('s', ''));
 
         this.element.setAttribute('aria-hidden', !this.state.isOpened);
         document.documentElement.classList[classAction](CLASSES.modalOpened);
+        setTimeout(() => {
+            this.element.classList[classAction](CLASSES.modalIsOpened);
+        }, transitionDuration * 1000);
     }
 }
 

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

@@ -92,7 +92,6 @@ details
                 transform: translateY(-5px)
 .modal
     align-items: center
-    display: flex
     justify-content: center
     height: 100vh
     left: 0
@@ -102,6 +101,14 @@ details
     width: 100%
     margin: 0
     z-index: $zindex-modal
+    opacity: 0
+    transition: opacity $header-transition
+    html.is-animating &
+        opacity: 0
+        display: flex
+    &.is-opened
+        opacity: 1
+        display: flex
     &[aria-hidden="true"]
         display: none
     .modal-content