From 464c0e819b625cb5f313d29235eddb36e91210fa Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 5 Nov 2022 17:37:36 -0700
Subject: [PATCH] Fix animation

---
 src/App.vue               | 13 -------------
 src/components/Viewer.vue | 27 ++++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index aeb97975..ca4105ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -297,19 +297,6 @@ body {
   }
 }
 
-// PhotoSwipe styles
-.pswp__button {
-  color: white;
-
-  &,
-  * {
-    cursor: pointer;
-  }
-}
-.pswp__icn-shadow {
-  display: none;
-}
-
 // Hide horizontal scrollbar on mobile
 // For the padding removal above
 #app-content-vue {
diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue
index facb1144..3bb9d7c7 100644
--- a/src/components/Viewer.vue
+++ b/src/components/Viewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="memories_viewer outer" v-if="show">
+  <div class="memories_viewer outer" v-if="show" :class="{ fullyOpened }">
     <div class="inner" ref="inner">
       <div class="top-bar" v-if="photoswipe" :class="{ opened }">
         <NcActions :inline="3" container=".memories_viewer .pswp">
@@ -75,6 +75,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
 
   private show = false;
   private opened = false;
+  private fullyOpened = false;
 
   /** Base dialog */
   private photoswipe: PhotoSwipe | null = null;
@@ -135,9 +136,14 @@ export default class Viewer extends Mixins(GlobalMixin) {
       navElem.style.zIndex = "0";
     });
     this.photoswipe.on("openingAnimationStart", () => {
+      this.fullyOpened = false;
       this.opened = true;
     });
+    this.photoswipe.on("openingAnimationEnd", () => {
+      this.fullyOpened = true;
+    });
     this.photoswipe.on("close", () => {
+      this.fullyOpened = false;
       this.opened = false;
     });
     this.photoswipe.on("destroy", () => {
@@ -147,6 +153,7 @@ export default class Viewer extends Mixins(GlobalMixin) {
       // reset everything
       this.show = false;
       this.opened = false;
+      this.fullyOpened = false;
       this.photoswipe = null;
       this.list = [];
       this.days.clear();
@@ -423,4 +430,22 @@ export default class Viewer extends Mixins(GlobalMixin) {
     opacity: 1;
   }
 }
+
+.fullyOpened :deep .pswp__container {
+  transition: transform var(--pswp-transition-duration) ease !important;
+}
+
+:deep .pswp {
+  .pswp__button {
+    color: white;
+
+    &,
+    * {
+      cursor: pointer;
+    }
+  }
+  .pswp__icn-shadow {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file