socialnetworknews-web

commit 96aa7e1dca3c76b6ef7d78b7bbcc49e1e6ce76b0
parent 2a9219a97b078a0e17cf66c561e5bb3f9b3543a3
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sat, 31 Mar 2018 19:24:47 +0200

Optimize Animations

Diffstat:
M
src/app/login/login.component.html
 | 
4
++--
M
src/app/login/login.component.scss
 | 
87
+++++++++++++++++++++++++++++++++++++++++--------------------------------------

2 files changed, 47 insertions(+), 44 deletions(-)
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -1,7 +1,7 @@
 <main>
   <div class="login-box">
     <h2>Login</h2>
-    <a href="#" class="social-button" id="google-connect"><i class="fab fa-google-plus-g gpred"></i> <span>Connect with Google (Not Implemented)</span></a>
-    <a href="/api/login/twitter" class="social-button" id="twitter-connect"><i class="fab fa-twitter tblue"></i> <span>Connect with Twitter</span></a>
+    <a href="#" class="social-button" id="google-connect"><span><i class="fab fa-google-plus-g gpred"></i>  Connect with Google (Not Implemented)</span></a>
+    <a href="/api/login/twitter" class="social-button" id="twitter-connect"><span><i class="fab fa-twitter tblue"></i> Connect with Twitter</span></a>
   </div>
 </main>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
@@ -14,14 +14,14 @@ body {
   position: relative;
 }
 
-/* Pre-render the bigger shadow, but hide it */
+/* Pre-render the shadow, but hide it */
 .login-box::after {
   box-shadow: 0 5px 15px rgba(0,0,0,0.3);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
 
-/* Transition to showing the bigger shadow on hover */
+/* Transition to showing the shadow on hover */
 .login-box:hover::after {
   opacity: 1;
 }
@@ -49,88 +49,91 @@ body {
   width: 100%;
   border-radius: 3px;
   margin: 10px auto;
-  outline: rgb(255, 255, 255) none 0px;
+  outline: rgb(255, 255, 255) none 0;
   padding-left: 20%;
   transition: all 0.2s cubic-bezier(0.72, 0.01, 0.56, 1) 0s;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
-  transition: all .3s ease;
 }
 
 #google-connect {
+  background-color: rgb(255, 255, 255);
   border: 1px solid rgb(220, 74, 61);
 }
 
-#google-connect:hover {
+/* Pre-render the border, but hide it */
+#google-connect::after {
+  background-color: rgb(220, 74, 61);
   border-color: rgb(220, 74, 61);
-  -webkit-transition: all .8s ease-out;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
+  opacity: 0;
   transition: all .3s ease-out;
 }
 
+/* Transition to showing the border on hover */
+#google-connect:hover::after {
+  opacity: 1;
+}
+
 #google-connect span {
   box-sizing: border-box;
   color: rgb(220, 74, 61);
   cursor: pointer;
   text-align: center;
   text-transform: uppercase;
-  border: 0px none rgb(220, 74, 61);
-  outline: rgb(255, 255, 255) none 0px;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
+  border: 0 none rgb(220, 74, 61);
+  outline: rgb(255, 255, 255) none 0;
   transition: all .3s ease;
 }
 
-#google-connect:hover span {
+/* Pre-render the border, but hide it */
+#google-connect::after span {
   color: #FFF;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
-  transition: all .3s ease;
+  opacity: 0;
+  transition: all .3s ease-out;
+}
+
+/* Transition to showing the border on hover */
+#google-connect:hover::after span {
+  opacity: 1;
 }
 
 #twitter-connect {
+  background-color: rgb(255, 255, 255);
   border: 1px solid rgb(85, 172, 238);
 }
 
-#twitter-connect:hover {
+/* Pre-render the border, but hide it */
+#twitter-connect::after {
+  background-color: rgb(85, 172, 238);
   border-color: rgb(85, 172, 238);
-  -webkit-transition: all .8s ease-out;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
+  opacity: 0;
   transition: all .3s ease-out;
 }
 
+/* Transition to showing the border on hover */
+#twitter-connect:hover::after {
+  opacity: 1;
+}
+
 #twitter-connect span {
   box-sizing: border-box;
   color: rgb(85, 172, 238);
   cursor: pointer;
   text-align: center;
   text-transform: uppercase;
-  border: 0px none rgb(220, 74, 61);
-  outline: rgb(255, 255, 255) none 0px;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
+  border: 0 none rgb(220, 74, 61);
+  outline: rgb(255, 255, 255) none 0;
   transition: all .3s ease;
 }
 
-#twitter-connect:hover span {
+/* Pre-render the border, but hide it */
+#twitter-connect::after span {
   color: #FFF;
-  -webkit-transition: all .3s ease;
-  -moz-transition: all .3s ease;
-  -ms-transition: all .3s ease;
-  -o-transition: all .3s ease;
-  transition: all .3s ease;
+  opacity: 0;
+  transition: all .3s ease-out;
+}
+
+/* Transition to showing the border on hover */
+#twitter-connect:hover::after span {
+  opacity: 1;
 }
 
 .tblue {