xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

support for transition speed settings (closes #392)

This commit is contained in:
Hakim El Hattab 2013-04-06 12:18:25 -04:00
parent 308987ee31
commit a400dd0c70
5 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -100,7 +100,10 @@ Reveal.initialize({
rollingLinks: true, rollingLinks: true,
// Transition style // 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"> <section data-transition="zoom">
<h2>This slide will override the presentation transition and zoom!</h2> <h2>This slide will override the presentation transition and zoom!</h2>
</section> </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. Note that this does not work with the page and cube transitions.

56
css/reveal.css
View File

@ -566,24 +566,52 @@ body {
-webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), -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), -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), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 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-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), -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), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 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-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), -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), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 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-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), -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), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 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), 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), transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
visibility 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); 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 { .reveal .slides>section {

2
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
js/reveal.js
View File

@ -73,6 +73,9 @@ var Reveal = (function(){
// Transition style // 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
// Script dependencies to load // Script dependencies to load
dependencies: [] dependencies: []
}, },
@ -340,6 +343,8 @@ var Reveal = (function(){
dom.wrapper.classList.add( config.transition ); dom.wrapper.classList.add( config.transition );
dom.wrapper.setAttribute( 'data-transition-speed', config.transitionSpeed );
if( dom.controls ) { if( dom.controls ) {
dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none'; dom.controls.style.display = ( config.controls && dom.controls ) ? 'block' : 'none';
} }

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long