Add transition to background color

Pathgather · Dec 10, 2014 · 93ed9d9 · 93ed9d9
1 parent 33a0f0b
commit 93ed9d9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/build/please-wait.css b/build/please-wait.css
@@ -17,8 +17,14 @@ body.pg-loaded {
   top: 0;
   z-index: 1000000;
   opacity: 1;
-}
-/* line 31, ../src/please-wait.scss */
+  background-color: #FFF;
+  -webkit-transition: background-color 0.6s ease-in-out 0s;
+  -moz-transition: background-color 0.6s ease-in-out 0s;
+  -ms-transition: background-color 0.6s ease-in-out 0s;
+  -o-transition: background-color 0.6s ease-in-out 0s;
+  transition: background-color 0.6s ease-in-out 0s;
+}
+/* line 33, ../src/please-wait.scss */
 .pg-loading-screen.pg-loaded {
   opacity: 0;
   -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
@@ -27,35 +33,35 @@ body.pg-loaded {
   -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
   animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
 }
-/* line 37, ../src/please-wait.scss */
+/* line 39, ../src/please-wait.scss */
 .pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html {
   opacity: 1;
 }
-/* line 41, ../src/please-wait.scss */
+/* line 43, ../src/please-wait.scss */
 .pg-loading-screen.pg-loading .pg-loading-logo-header, .pg-loading-screen.pg-loading .pg-loading-html {
   -webkit-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   -moz-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   -ms-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   -o-animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
   animation: pgAnimLoading 1s cubic-bezier(0.7, 0, 0.3, 1) both;
 }
-/* line 45, ../src/please-wait.scss */
+/* line 47, ../src/please-wait.scss */
 .pg-loading-screen.pg-loading .pg-loading-html {
   -webkit-animation-delay: 0.3s;
   -moz-animation-delay: 0.3s;
   -ms-animation-delay: 0.3s;
   -o-animation-delay: 0.3s;
   animation-delay: 0.3s;
 }
-/* line 50, ../src/please-wait.scss */
+/* line 52, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-inner {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   position: static;
 }
-/* line 58, ../src/please-wait.scss */
+/* line 60, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-center-outer {
   width: 100%;
   padding: 0;
@@ -66,32 +72,32 @@ body.pg-loaded {
   left: 0;
   margin: 0;
 }
-/* line 69, ../src/please-wait.scss */
+/* line 71, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-center-middle {
   padding: 0;
   vertical-align: middle;
   display: table-cell  !important;
   margin: 0;
   text-align: center;
 }
-/* line 77, ../src/please-wait.scss */
+/* line 79, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-logo-header, .pg-loading-screen .pg-loading-html {
   width: 100%;
   opacity: 0;
 }
-/* line 82, ../src/please-wait.scss */
+/* line 84, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-logo-header {
   text-align: center;
 }
-/* line 85, ../src/please-wait.scss */
+/* line 87, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-logo-header img {
   display: inline-block !important;
 }
-/* line 90, ../src/please-wait.scss */
+/* line 92, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-html {
   margin-top: 90px;
 }
-/* line 93, ../src/please-wait.scss */
+/* line 95, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-html.pg-removing {
   opacity: 0;
   -webkit-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
@@ -100,7 +106,7 @@ body.pg-loaded {
   -o-animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
   animation: pgAnimLoaded 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;
 }
-/* line 98, ../src/please-wait.scss */
+/* line 100, ../src/please-wait.scss */
 .pg-loading-screen .pg-loading-html.pg-loading {
   opacity: 1;
   -webkit-animation: pgAnimLoading 0.5s cubic-bezier(0.7, 0, 0.3, 1) both;

diff --git a/src/please-wait.scss b/src/please-wait.scss
@@ -27,6 +27,8 @@ body.pg-loaded {
   top: 0;
   z-index: 1000000;
   opacity: 1;
+  background-color: #FFF;
+  @include prefixed(transition, background-color 0.6s ease-in-out 0s);
 
   &.pg-loaded {
     opacity: 0;