From 7bec3dfa373f946280c0ff98b2a197d5179b2f92 Mon Sep 17 00:00:00 2001
From: Ryan Arthur <ryan@gaslight.co>
Date: Thu, 2 Aug 2018 11:43:09 -0400
Subject: [PATCH] Add intro animation to transactions on homepage - Adjust
 animation values for better performance

---
 .../assets/css/components/_animations.scss    | 29 +++++++++++++++++--
 .../templates/chain/_block.html.eex           |  2 +-
 .../templates/chain/show.html.eex             |  3 +-
 .../templates/transaction/_tile.html.eex      |  2 +-
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/explorer_web/assets/css/components/_animations.scss b/apps/explorer_web/assets/css/components/_animations.scss
index d01ac6579d..22cd004011 100644
--- a/apps/explorer_web/assets/css/components/_animations.scss
+++ b/apps/explorer_web/assets/css/components/_animations.scss
@@ -3,7 +3,7 @@
   100% {opacity: 1;}
 }
 
-@keyframes fade-up {
+@keyframes fade-up-blocks-homepage {
   0% {
     flex-basis: 0%;
     width: 0%;
@@ -23,13 +23,36 @@
   }
 }
 
+@keyframes fade-up {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+  25% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  50% {
+    height: 98px;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .fade-in {
   animation: fade-in 1s ease-out forwards;
 }
 
+.fade-up-blocks-homepage {
+  will-change: transform, opacity, width;
+  max-height: 98px;
+  animation: fade-up-blocks-homepage 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
 
 .fade-up {
-  will-change: transform, opacity, width;
+  will-change: transform, opacity, height;
   max-height: 98px;
-  animation: fade-up 0.55s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex
index ee9ba26f85..88cbe9d301 100644
--- a/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex
@@ -1,4 +1,4 @@
-<div class="col-sm-3 fade-up" data-selector="chain-block" data-block-number="<%= @block.number %>">
+<div class="col-sm-3 fade-up-blocks-homepage" data-selector="chain-block" data-block-number="<%= @block.number %>">
   <div class="tile d-flex flex-column">
     <%= link(@block, to: block_path(ExplorerWeb.Endpoint, :show, @locale, @block), class: "tile-title") %>
     <div>
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex
index c0a2c387a2..15ee6be8ae 100644
--- a/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex
@@ -63,7 +63,8 @@
       </div>
     </div>
   </div>
-  <div class="card">
+  <!-- We hardcoded the height on this element to keep the page from bouncing during the intro animation. -->
+  <div class="card" style="height: 694px;">
     <div class="card-body">
       <div data-selector="channel-batching-message" style="display:none;">
         <div data-selector="reload-button" class="alert alert-info">
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex
index a6f1b7d4d7..c2b5dd41aa 100644
--- a/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex
+++ b/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex
@@ -1,4 +1,4 @@
-<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
+<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %> fade-up" data-test="<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
   <div class="row" data-test="chain_transaction">
     <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
       <span class="tile-label" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %></span>