in/out transitions for controls

README.md

@@ -181,9 +181,20 @@ At the end of your page you need to initialize reveal by running the following c
 ```javascript
 Reveal.initialize({
 
-	// Display controls in the bottom right corner
+	// Display presentation control arrows
 	controls: true,
 
+	// Hint at where the user can navigate, for example by animating
+	// the down arrow when we first encounter a vertical slide
+	controlsHints: true,
+
+	// Determines where controls appear, "edges" or "bottom-right"
+	controlsLayout: 'bottom-right',
+
+	// Visibility rule for backwards navigation arrows; "faded", "hidden"
+	// or "visible"
+	controlsBackArrows: 'faded',
+
 	// Display a presentation progress bar
 	progress: true,
 

css/reveal.css

@@ -251,7 +251,8 @@ body {
     color: currentColor;
     -webkit-transform: scale(0.9999);
             transform: scale(0.9999);
-    transition: all 0.2s ease;
+    transition: color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
+    transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
     z-index: 2;
     pointer-events: auto;
     visibility: hidden;
@@ -296,32 +297,40 @@ body {
               transform: translateX(7px) translateY(20px) rotate(-36deg); }
   .reveal .controls .navigate-left {
     right: 82px;
-    bottom: 18px; }
+    bottom: 18px;
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px); }
     .reveal .controls .navigate-left .pagination-arrow {
       -webkit-transform: translateY(-50%);
               transform: translateY(-50%); }
   .reveal .controls .navigate-right {
     right: 0;
-    bottom: 18px; }
+    bottom: 18px;
+    -webkit-transform: translateX(10px);
+            transform: translateX(10px); }
     .reveal .controls .navigate-right .pagination-arrow {
       -webkit-transform: translateY(-50%) rotate(180deg);
               transform: translateY(-50%) rotate(180deg); }
-    .reveal .controls .navigate-right.bounce {
+    .reveal .controls .navigate-right.highlight {
       -webkit-animation: bounce-right 2s 50 both ease-out;
               animation: bounce-right 2s 50 both ease-out; }
   .reveal .controls .navigate-up {
     right: 18px;
-    bottom: 82px; }
+    bottom: 82px;
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px); }
     .reveal .controls .navigate-up .pagination-arrow {
       -webkit-transform: translateX(-50%) rotate(90deg);
               transform: translateX(-50%) rotate(90deg); }
   .reveal .controls .navigate-down {
     right: 18px;
-    bottom: 0; }
+    bottom: 0;
+    -webkit-transform: translateY(10px);
+            transform: translateY(10px); }
     .reveal .controls .navigate-down .pagination-arrow {
       -webkit-transform: translateX(-50%) rotate(-90deg);
               transform: translateX(-50%) rotate(-90deg); }
-    .reveal .controls .navigate-down.bounce {
+    .reveal .controls .navigate-down.highlight {
       -webkit-animation: bounce-down 2s 50 both ease-out;
               animation: bounce-down 2s 50 both ease-out; }
   .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
@@ -337,7 +346,9 @@ body {
   .reveal .controls .enabled {
     visibility: visible;
     opacity: 0.7;
-    cursor: pointer; }
+    cursor: pointer;
+    -webkit-transform: none;
+            transform: none; }
   .reveal .controls .enabled.fragmented {
     opacity: 0.3; }
   .reveal .controls .enabled:hover,

css/reveal.scss

@@ -286,7 +286,9 @@ body {
 		cursor: pointer;
 		color: currentColor;
 		transform: scale(.9999);
-		transition: all 0.2s ease;
+		transition: color 0.2s ease,
+					opacity 0.2s ease,
+					transform 0.2s ease;
 		z-index: 2; // above slides
 		pointer-events: auto;
 
@@ -332,6 +334,7 @@ body {
 	.navigate-left {
 		right: $size + $innerSpacing*2;
 		bottom: $innerSpacing;
+		transform: translateX( -10px );
 
 		.pagination-arrow {
 			transform: translateY(-50%);
@@ -341,12 +344,13 @@ body {
 	.navigate-right {
 		right: 0;
 		bottom: $innerSpacing;
+		transform: translateX( 10px );
 
 		.pagination-arrow {
 			transform: translateY(-50%) rotate( 180deg );
 		}
 
-		&.bounce {
+		&.highlight {
 			animation: bounce-right 2s 50 both ease-out;
 		}
 	}
@@ -354,6 +358,7 @@ body {
 	.navigate-up {
 		right: $innerSpacing;
 		bottom: $size + $innerSpacing*2;
+		transform: translateY( -10px );
 
 		.pagination-arrow {
 			transform: translateX(-50%) rotate( 90deg );
@@ -363,12 +368,13 @@ body {
 	.navigate-down {
 		right: $innerSpacing;
 		bottom: 0;
+		transform: translateY( 10px );
 
 		.pagination-arrow {
 			transform: translateX(-50%) rotate( -90deg );
 		}
 
-		&.bounce {
+		&.highlight {
 			animation: bounce-down 2s 50 both ease-out;
 		}
 	}
@@ -398,6 +404,7 @@ body {
 		visibility: visible;
 		opacity: 0.7;
 		cursor: pointer;
+		transform: none;
 	}
 
 	// Any control button that leads to showing or hiding

js/reveal.js

@@ -49,7 +49,7 @@
 			minScale: 0.2,
 			maxScale: 2.0,
 
-			// Display controls in the bottom right corner
+			// Display presentation control arrows
 			controls: true,
 
 			// Hint at where the user can navigate, for example by animating