Fix Fade animation

peduarte · Sep 13, 2015 · 181ecee · 181ecee
1 parent be147a3
commit 181ecee
Showing 1 changed file with 21 additions and 21 deletions.
diff --git a/css/wallop--fade.css b/css/wallop--fade.css
@@ -7,41 +7,41 @@
  * @author http://pedroduarte.me/wallop
  */
 
-.Wallop-item--current {
-  opacity: 0;
-  -webkit-animation: fadeIn 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
-  -moz-animation: fadeIn 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
-  -ms-animation: fadeIn 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
-  animation: fadeIn 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
-}
-
-.Wallop--fade .Wallop-item--hidePrevious,
-.Wallop--fade .Wallop-item--hideNext {
+ .Wallop--fade .Wallop-item--hidePrevious,
+ .Wallop--fade .Wallop-item--hideNext {
   visibility: visible;
+  -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+  -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+  -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+  animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
 }
 
-.Wallop--fade .Wallop-item--hideNext {
-  z-index: -1;
-}
+/*
+  In order to fade out properly we need to make sure
+  that the item that is going to be the previous one
+  has a higer z-index that the next one
+ */
+.Wallop--fade .Wallop-item--hidePrevious { z-index: 2; }
+.Wallop--fade .Wallop-item--showNext { z-index: 1; }
 
  /*==========  FADE ANIMATIONS  ==========*/
-@-webkit-keyframes fadeIn {
+@-webkit-keyframes fadeOut {
   100% {
-    opacity: 1;
+    opacity: 0;
   }
 }
-@-moz-keyframes fadeIn {
+@-moz-keyframes fadeOut {
   100% {
-    opacity: 1;
+    opacity: 0;
   }
 }
-@-ms-keyframes fadeIn {
+@-ms-keyframes fadeOut {
   100% {
-    opacity: 1;
+    opacity: 0;
   }
 }
-@keyframes fadeIn {
+@keyframes fadeOut {
   100% {
-    opacity: 1;
+    opacity: 0;
   }
 }