header button animation fix

MyEtherWallet · Aug 16, 2018 · 223af69 · 223af69 · mew-bot · Aug 16, 2018
1 parent ec060ea
commit 223af69
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/containers/HeaderContainer/HeaderContainer.scss b/src/containers/HeaderContainer/HeaderContainer.scss
@@ -127,6 +127,10 @@
           margin-left: 26px;
           padding: 13px 0;
 
+          &.nopadding {
+            padding: 0;
+          }
+
           a {
             color: $text-color-3;
           }
@@ -170,8 +174,9 @@
 
 .get-free-wallet {
   position: relative;
-  animation: fadeInFromNone 0.3s ease-out;
+  animation: fadeInFromNone 0.5s ease-out;
   animation-fill-mode:forwards;
+  opacity: 1;
 
   .get-free-wallet-button {
     border: 1px solid $border-green;
@@ -183,6 +188,7 @@
     transition: background-color .2s ease;
     display: block;
     position: relative;
+    overflow: hidden;
 
     &:hover {
       background-color: $text-color-green;
@@ -191,41 +197,54 @@
   }
 
   &.noshow {
-    animation: fadeOutFromBlock 0.3s ease-out;
+    animation: fadeOutFromBlock 0.5s ease-out;
     animation-fill-mode: forwards;
   }
 
   @keyframes fadeInFromNone {
     0% {
+      width: 0px;
+      height: 0px;
       opacity: 0;
-      position: relative;
+      margin-left: 0px;
     }
 
-    1% {
+    50% {
+      width: 173px;
+      height: 54px;
       opacity: 0;
+      margin-left: 20px;
     }
 
     100% {
+      width: 173px;
+      height: 54px;
       opacity: 1;
+      margin-left: 20px;
     }
   }
 
 
   @keyframes fadeOutFromBlock {
     0% {
+      width: 173px;
+      height: 54px;
       opacity: 1;
-      position: relative;
+      margin-left: 20px;
     }
 
-    99% {
+    50% {
+      width: 173px;
+      height: 54px;
       opacity: 0;
-      position: relative;
+      margin-left: 20px;
     }
 
     100% {
+      width: 0px;
+      height: 0px;
       opacity: 0;
-      z-index: -1;
-      position: absolute;
+      margin-left: 0px;
     }
   }
 } // .get-free-wallet

diff --git a/src/containers/HeaderContainer/HeaderContainer.vue b/src/containers/HeaderContainer/HeaderContainer.vue
@@ -39,7 +39,7 @@
                   </b-nav-item-dropdown>
                 </div>
                 <notification v-if="wallet !== null"></notification>
-                <b-nav-item class="get-free-wallet" to="/create-wallet" v-if="wallet === null && $route.fullPath === '/'" :class="isPageOnTop == true ? 'noshow' : ''">
+                <b-nav-item class="get-free-wallet nopadding" to="/create-wallet" v-if="wallet === null && $route.fullPath === '/'" :class="isPageOnTop == true ? 'noshow' : ''">
                   <div class="get-free-wallet-button">
                     Get a Free Wallet
                  </div>