proper animation

src/components/update_notification/update_notification.js

@@ -29,6 +29,11 @@ const UpdateNotification = {
         'shape-outside': 'url(' + this.pleromaTanVariant + ')'
       }
     },
+    dynamicStyles () {
+      return {
+        '--____extraInfoGroupHeight': this.contentHeight + 'px'
+      }
+    },
     shouldShow () {
       return !this.$store.state.instance.disableUpdateNotification &&
         this.$store.state.users.currentUser &&
@@ -53,8 +58,8 @@ const UpdateNotification = {
   },
   mounted () {
     setTimeout(() => {
-      this.contentHeight = this.$refs.content.offsetHeight
+      this.contentHeight = this.$refs.animatedText.scrollHeight
-    }, 10)
+    }, 1000)
   }
 }
 

src/components/update_notification/update_notification.scss

@@ -2,27 +2,20 @@
 .UpdateNotification {
   overflow: hidden;
 }
+
 .UpdateNotificationModal {
   --__top-fringe: 18em; // how much pleroma-tan should stick her head above
   --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
   --__right-fringe: 8em;
 
   font-size: 15px;
-  /* Explanation:
-   * Modal is positioned vertically centered.
-   * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
-   * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
-   * + 10% - we move modal completely off-screen, it's top boundary touches
-   *   bottom of the screen
-   * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
-   */
   position: relative;
   transition: transform;
   transition-timing-function: ease-in-out;
   transition-duration: 500ms;
 
   .text {
-    width: 40em;
+    max-width: 40em;
     padding-left: 1em;
   }
 
@@ -80,15 +73,21 @@
     min-height: var(--__bottom-fringe);
   }
 
-  .extra-info {
+  .extra-info-group {
     transition: max-height, padding, height;
     transition-timing-function: ease-in-out;
     transition-duration: 500ms;
-    max-height: auto;
+    max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
-    height: auto;
+    mask:
+      linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
+      linear-gradient(to top, white, white);
   }
 
   &.-peek {
+  /* Explanation:
+   * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+   * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+   */
     transform: translateY(calc(((100vh - 100%) / 2)));
 
     .pleroma-tan {
@@ -97,11 +96,8 @@
       shape-image-threshold: 0.7;
     }
 
-    .extra-info {
+    .extra-info-group {
       max-height: 0;
-      height: 0;
-      display: none;
-      overflow: hidden;
     }
   }
 }

src/components/update_notification/update_notification.vue

@@ -7,6 +7,7 @@
     <div
       class="UpdateNotificationModal panel"
       :class="{ '-peek': !showingMore }"
+      :style="dynamicStyles"
     >
       <div class="panel-heading">
         <span class="title">
@@ -14,10 +15,7 @@
         </span>
       </div>
       <div class="panel-body">
-        <div
+        <div class="content">
-          ref="content"
-          class="content"
-        >
           <img
             class="pleroma-tan"
             :src="pleromaTanVariant"
@@ -28,30 +26,32 @@
             <p>
               {{ $t('update.big_update_content') }}
             </p>
-            <i18n-t
+            <div class="extra-info-group" ref="animatedText">
-              keypath="update.update_bugs"
+              <i18n-t
-              tag="p"
+                keypath="update.update_bugs"
-              class="extra-info"
+                tag="p"
-            >
+                class="extra-info"
-              <template #pleromaGitlab>
+              >
-                <a
+                <template #pleromaGitlab>
-                  target="_blank"
+                  <a
-                  href="https://git.pleroma.social/"
+                    target="_blank"
-                >{{ $t('update.update_bugs_gitlab') }}</a>
+                    href="https://git.pleroma.social/"
-              </template>
+                  >{{ $t('update.update_bugs_gitlab') }}</a>
-            </i18n-t>
+                </template>
-            <i18n-t
+              </i18n-t>
-              keypath="update.update_changelog"
+              <i18n-t
-              tag="p"
+                keypath="update.update_changelog"
-              class="extra-info"
+                tag="p"
-            >
+                class="extra-info"
-              <template #theFullChangelog>
+              >
-                <a
+                <template #theFullChangelog>
-                  target="_blank"
+                  <a
-                  href="https://pleroma.social/announcements/"
+                    target="_blank"
-                >{{ $t('update.update_changelog_here') }}</a>
+                    href="https://pleroma.social/announcements/"
-              </template>
+                  >{{ $t('update.update_changelog_here') }}</a>
-            </i18n-t>
+                </template>
+              </i18n-t>
+            </div>
           </div>
           <div class="spacer-bottom" />
         </div>