Browse Source

support for transition speed settings (closes #392)

Hakim El Hattab 11 years ago
parent
commit
a400dd0c70
5 changed files with 56 additions and 16 deletions
  1. 8 1
      README.md
  2. 42 14
      css/reveal.css
  3. 0 0
      css/reveal.min.css
  4. 5 0
      js/reveal.js
  5. 1 1
      js/reveal.min.js

+ 8 - 1
README.md

@@ -100,7 +100,10 @@ Reveal.initialize({
 	rollingLinks: true,
 
 	// Transition style
-	transition: 'default' // default/cube/page/concave/zoom/linear/fade/none
+	transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
+
+	// Transition speed
+	transitionSpeed: 'default', // default/fast/slow
 
 });
 ```
@@ -268,6 +271,10 @@ The global presentation transition is set using the ```transition``` config valu
 <section data-transition="zoom">
 	<h2>This slide will override the presentation transition and zoom!</h2>
 </section>
+
+<section data-transition-speed="fast">
+	<h2>Choose from three transition speeds: default, fast or slow!</h2>
+</section>
 ```
 
 Note that this does not work with the page and cube transitions.

+ 42 - 14
css/reveal.css

@@ -566,24 +566,52 @@ body {
 
 	-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
 						-webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	   -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	   					-moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+						-moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	    -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	    				-ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+						-ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	     -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	     				-o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+						-o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	        transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	        			transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
-	                    opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+						transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
+						opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+/* Global transition speed settings */
+.reveal[data-transition-speed="fast"] .slides section {
+	-webkit-transition-duration: 400ms;
+	   -moz-transition-duration: 400ms;
+	    -ms-transition-duration: 400ms;
+	        transition-duration: 400ms;
+}
+.reveal[data-transition-speed="slow"] .slides section {
+	-webkit-transition-duration: 1200ms;
+	   -moz-transition-duration: 1200ms;
+	    -ms-transition-duration: 1200ms;
+	        transition-duration: 1200ms;
+}
+
+/* Slide-specific transition speed overrides */
+.reveal .slides section[data-transition-speed="fast"] {
+	-webkit-transition-duration: 400ms;
+	   -moz-transition-duration: 400ms;
+	    -ms-transition-duration: 400ms;
+	        transition-duration: 400ms;
+}
+.reveal .slides section[data-transition-speed="slow"] {
+	-webkit-transition-duration: 1200ms;
+	   -moz-transition-duration: 1200ms;
+	    -ms-transition-duration: 1200ms;
+	        transition-duration: 1200ms;
 }
 
 .reveal .slides>section {

File diff suppressed because it is too large
+ 0 - 0
css/reveal.min.css


+ 5 - 0
js/reveal.js

@@ -73,6 +73,9 @@ var Reveal = (function(){
 			// Transition style
 			transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
 
+			// Transition speed
+			transitionSpeed: 'default', // default/fast/slow
+
 			// Script dependencies to load
 			dependencies: []
 		},
@@ -340,6 +343,8 @@ var Reveal = (function(){
 
 		dom.wrapper.classList.add( config.transition );
 
+		dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
+
 		if( dom.controls ) {
 			dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
 		}

File diff suppressed because it is too large
+ 1 - 1
js/reveal.min.js


Some files were not shown because too many files changed in this diff