Fix animation

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 {

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>