implement a fade transition

joelrbrandt · joelrbrandt · commit 082e4ed16867 · 2013-01-16T12:49:10.000-08:00
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@ Reveal.initialize({
 	rollingLinks: true,
 
 	// Transition style
-	transition: 'default' // default/cube/page/concave/zoom/linear/none
+	transition: 'default' // default/cube/page/concave/zoom/linear/fade/none
 });
 ```
 
diff --git a/css/reveal.css b/css/reveal.css
@@ -1046,6 +1046,36 @@ body {
 	);
 }
 
+/*********************************************
+ * FADE TRANSITION
+ *********************************************/
+
+.reveal.fade .slides section,
+.reveal.fade .slides>section>section {
+    -webkit-transform: none;
+	   -moz-transform: none;
+	    -ms-transform: none;
+	     -o-transform: none;
+	        transform: none;
+
+	-webkit-transition: opacity 0.5s;
+	   -moz-transition: opacity 0.5s;
+	    -ms-transition: opacity 0.5s;
+	     -o-transition: opacity 0.5s;
+	        transition: opacity 0.5s;
+}
+
+
+.reveal.fade.overview .slides section,
+.reveal.fade.overview .slides>section>section,
+.reveal.fade.exit-overview .slides section,
+.reveal.fade.exit-overview .slides>section>section {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	    -ms-transition: none;
+	     -o-transition: none;
+	        transition: none;
+}
 
 /*********************************************
  * NO TRANSITION
diff --git a/css/reveal.min.css b/css/reveal.min.css
diff --git a/index.html b/index.html
@@ -151,6 +151,7 @@ <h2>Transition Styles</h2>
 						<a href="?transition=concave#/transitions">Concave</a> -
 						<a href="?transition=zoom#/transitions">Zoom</a> -
 						<a href="?transition=linear#/transitions">Linear</a> -
+						<a href="?transition=fade#/transitions">Fade</a> -
 						<a href="?transition=none#/transitions">None</a> -
 						<a href="?#/transitions">Default</a>
 					</p>
@@ -354,7 +355,7 @@ <h3>BY Hakim El Hattab / hakim.se</h3>
 				center: true,
 
 				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
-				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
+				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
 
 				// Optional libraries used to extend on reveal.js
 				dependencies: [
diff --git a/js/reveal.js b/js/reveal.js
@@ -51,11 +51,11 @@ var Reveal = (function(){
 			// Apply a 3D roll to links on hover
 			rollingLinks: true,
 
-			// Transition style (see /css/theme)
+			// Theme (see /css/theme)
 			theme: null,
 
 			// Transition style
-			transition: 'default', // default/cube/page/concave/zoom/linear/none
+			transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
 
 			// Script dependencies to load
 			dependencies: []
@@ -106,6 +106,9 @@ var Reveal = (function(){
 		// A delay used to ativate the overview mode
 		activateOverviewTimeout = 0,
 
+		// A delay used to deativate the overview mode
+		deactivateOverviewTimeout = 0,
+
 		// Holds information about the currently ongoing touch input
 		touch = {
 			startX: 0,
@@ -583,8 +586,9 @@ var Reveal = (function(){
 		if( config.overview ) {
 
 			dom.wrapper.classList.add( 'overview' );
-
+			dom.wrapper.classList.remove( 'exit-overview' );
 			clearTimeout( activateOverviewTimeout );
+			clearTimeout( deactivateOverviewTimeout );
 
 			// Not the pretties solution, but need to let the overview 
 			// class apply first so that slides are measured accurately 
@@ -655,8 +659,16 @@ var Reveal = (function(){
 		if( config.overview ) {
 
 			clearTimeout( activateOverviewTimeout );
+			clearTimeout( deactivateOverviewTimeout );
 
 			dom.wrapper.classList.remove( 'overview' );
+			// Temporarily add a class so that transitions can do different things
+			// depending on whether they are exiting/entering overview, or just
+			// moving from slide to slide
+			dom.wrapper.classList.add( 'exit-overview' );
+			deactivateOverviewTimeout = setTimeout( function () {
+				dom.wrapper.classList.remove( 'exit-overview' );
+			}, 10);
 
 			// Select all slides
 			var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) );
diff --git a/js/reveal.min.js b/js/reveal.min.js
