Refine animations

Use the vaadin-overlay opening and closing animation support.
vaadin · Mar 9, 2018 · 6e95e3f · 6e95e3f
1 parent ee1a2e7
commit 6e95e3f
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/theme/lumo/vaadin-dialog.html b/theme/lumo/vaadin-dialog.html
@@ -6,18 +6,43 @@
     <style include="lumo-overlay">
       [part="overlay"] {
         box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
-        animation: 0.2s vaadin-dialog-enter cubic-bezier(.215, .61, .355, 1);
         background-image: none;
       }
 
       [part="content"] {
         padding: var(--lumo-space-l);
       }
 
+      /* Animations */
+
+      :host([opening]),
+      :host([closing]) {
+        animation: 0.25s lumo-overlay-dummy-animation;
+      }
+
+      :host([opening]) [part="overlay"] {
+        animation: 0.2s 0.05s vaadin-dialog-enter cubic-bezier(.215, .61, .355, 1) both;
+      }
+
       @keyframes vaadin-dialog-enter {
         0% {
           opacity: 0;
-          transform: scale(0.8) translateY(10px);
+          transform: scale(0.95);
+        }
+      }
+
+      :host([closing]) [part="overlay"] {
+        animation: 0.15s 0.03s vaadin-dialog-exit cubic-bezier(.550, .055, .675, .19) both;
+      }
+
+      :host([closing]) [part="backdrop"] {
+        animation-delay: 0.05s;
+      }
+
+      @keyframes vaadin-dialog-exit {
+        100% {
+          opacity: 0;
+          transform: scale(1.02);
         }
       }
     </style>