Added reverse animation to publish/preview modal contents when closing modal

refs 2fb62708a8

- use modal's own `.epm-out` class that's added when closing to trigger the reverse of the fade-in animation
- added `.publish-modal` class to the three publish modals so we can alter the default modal animations/timing if required

ghost/admin/app/components/editor-labs/modals/preview.js

@@ -9,7 +9,7 @@ export default class EditorPostPreviewModal extends Component {
     @service session;
 
     static modalOptions = {
-        className: 'fullscreen-modal-total-overlay',
+        className: 'fullscreen-modal-total-overlay publish-modal',
         omitBackdrop: true,
         ignoreBackdropClick: true
     };

ghost/admin/app/components/editor-labs/modals/publish-flow.js

@@ -6,7 +6,7 @@ import {tracked} from '@glimmer/tracking';
 
 export default class PublishModalComponent extends Component {
     static modalOptions = {
-        className: 'fullscreen-modal-total-overlay',
+        className: 'fullscreen-modal-total-overlay publish-modal',
         omitBackdrop: true,
         ignoreBackdropClick: true
     };

ghost/admin/app/components/editor-labs/modals/update-flow.js

@@ -3,7 +3,7 @@ import {task} from 'ember-concurrency';
 
 export default class UpdateFlowModalComponent extends Component {
     static modalOptions = {
-        className: 'fullscreen-modal-total-overlay',
+        className: 'fullscreen-modal-total-overlay publish-modal',
         omitBackdrop: true,
         ignoreBackdropClick: true
     };

ghost/admin/app/styles/components/browser-preview.css

@@ -19,6 +19,10 @@
     transform-origin: center;
     animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
 }
+.epm-out .gh-browserpreview-previewcontainer.fade-in {
+    transform-origin: center;
+    animation: fade-out-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
+}
 
 .gh-browserpreview-iframecontainer {
     flex-grow: 1;
@@ -95,4 +99,4 @@
 .gh-browserpreview-browser .favicon.default svg {
     width: 16px;
     height: 16px;
-}
+}

ghost/admin/app/styles/components/publishmenu.css

@@ -291,6 +291,16 @@
     animation: fade-in-pulse .25s forwards cubic-bezier(.8,.02,.45,.91);
 }
 
+.epm-out .gh-publish-settings-container.fade-in {
+    transform-origin: center;
+    animation: fade-out-pulse .25s forwards cubic-bezier(.8,.02,.45,.91);
+}
+
+/* wait for fade-out-pulse to finish before fading out modal */
+/* .publish-modal.epm-out {
+    animation-delay: .25s;
+} */
+
 @keyframes fade-in-pulse {
     0% {
         opacity:0;
@@ -309,6 +319,24 @@
     }
 }
 
+@keyframes fade-out-pulse {
+    0% {
+        -webkit-transform:scale(1);
+        transform:scale(1)
+    }
+
+    50% {
+        opacity:1
+    }
+
+    100%,
+    70% {
+        opacity:0;
+        -webkit-transform:scale(.85);
+        transform:scale(.85)
+    }
+}
+
 @media (max-width: 1024px) {
     .gh-publish-settings-container {
         padding-top: 10vh;
@@ -741,7 +769,7 @@
     font-weight: 600;
     line-height: 1.4em;line-clamp: 2;
     -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;  
+    -webkit-box-orient: vertical;
     overflow: hidden;
 }
 
@@ -778,4 +806,4 @@
     width: 20px;
     height: 20px;
     margin-right: 6px;
-}
+}