Use CSS3 transitions to crossfade differences

mmozuras · Jul 8, 2012 · e713756 · e713756
1 parent 55450a8
commit e713756
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/playback.css b/playback.css
@@ -11,6 +11,37 @@
   display:block;
 }
 
+.new {
+  max-height: 0px;
+  opacity: 0;
+  overflow: hidden;
+  -webkit-transition: all 1s ease-in-out;
+  -moz-transition: all 1s ease-in-out;
+  -o-transition: all 1s ease-in-out;
+  -transition: all 1s ease-in-out;
+}
+
+.old {
+  max-height: 16px;
+  opacity: 1;
+  overflow: hidden;
+  -webkit-transition: all 1s ease-in-out;
+  -moz-transition: all 1s ease-in-out;
+  -o-transition: all 1s ease-in-out;
+  -transition: all 1s ease-in-out;
+}
+
+.show {
+  max-height: 16px;
+  opacity: 1;
+}
+
+.hide {
+  background-color: red;
+  max-height: 0px;
+  opacity: 0;
+}
+
 ul {
   list-style: none;
 }

diff --git a/playback.js b/playback.js
@@ -44,10 +44,15 @@
 
           nextElem
             .css({ zIndex: 100 })
-            .fadeIn(200, function() {
+            .fadeIn(0, function() {
               control.animate({ height: nextElem.outerHeight() }, 200, function() {
                 prevElem.css({ display: 'none', zIndex: 0 });
+                $('.old', prevElem).removeClass('hide');
+                $('.new', prevElem).removeClass('show');
+
                 nextElem.css({ zIndex: 0 });
+                $('.old', nextElem).addClass('hide');
+                $('.new', nextElem).addClass('show');
 
                 active = false;
               });