feat(ui): add fade animation between pages

witnet · Mar 17, 2022 · ec2413d · ec2413d
1 parent 6d7cc7c
commit ec2413d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/packages/ui/components/FeedCard.vue b/packages/ui/components/FeedCard.vue
@@ -74,23 +74,15 @@ export default {
   },
   computed: {
     formatedValue() {
-      return formatNumber(this.formatedLastResult)
-    },
-    formatedLastResult() {
-      return this.lastResult.toFixed(this.adjustedDecimals)
-    },
-    lastResult() {
-      return parseFloat(this.value) / 10 ** this.decimals
-    },
-    hasMeaningfullZeros() {
-      return `${this.lastResult.toFixed(3)}`.split('.')[1] === '000'
-    },
-    adjustedDecimals() {
-      return this.lastResult < 1 ||
-        this.decimals < 3 ||
-        this.hasMeaningfullZeros
-        ? this.decimals
-        : 3
+      const lastResult = parseFloat(this.value) / 10 ** this.decimals
+      const hasMeaningfullZeros =
+        `${lastResult.toFixed(3)}`.split('.')[1] === '000'
+      const adjustedDecimals =
+        lastResult < 1 || this.decimals < 3 || hasMeaningfullZeros
+          ? this.decimals
+          : 3
+      const formatedLastResult = lastResult.toFixed(adjustedDecimals)
+      return formatNumber(formatedLastResult)
     },
     dataFeedStatus() {
       return getDataFeedStatus(this.timeToUpdate, this.lastResultTimestamp)

diff --git a/packages/ui/layouts/default.vue b/packages/ui/layouts/default.vue
@@ -4,7 +4,11 @@
       <NavBar slot="navbar" @scroll="handleScroll" />
       <div slot="cover" class="cover" :class="{ show: hideScroll }"></div>
       <BreadCrumbs slot="breadcrumbs" />
-      <Nuxt slot="content" />
+      <div slot="content">
+        <transition name="fade">
+          <nuxt />
+        </transition>
+      </div>
       <Footer slot="footer" />
     </MainSection>
   </div>
@@ -28,6 +32,17 @@ export default {
 }
 </script>
 <style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s;
+  opacity: 0;
+}
+.fade-enter-to {
+  opacity: 1;
+}
+.fade-leave-to {
+  opacity: 0;
+}
 html {
   font-family: Almarai, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, sans-serif;

diff --git a/packages/ui/utils/formatNumber.js b/packages/ui/utils/formatNumber.js
@@ -1,6 +1,5 @@
 export function formatNumber(num) {
-  let parsedNum = parseFloat(num)
-  parsedNum += ''
+  const parsedNum = parseFloat(num).toString()
   const splitedNumber = parsedNum.split('.')
   parseFloat(`0.${splitedNumber[1]}`)
   const decimals = splitedNumber.length > 1 ? '.' + splitedNumber[1] : ''