support for transition speed settings (closes #392)
This commit is contained in:
Hakim El Hattab
parent
308987ee31
commit
a400dd0c70
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 one or more lines are too long
|
|
@ -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 one or more lines are too long
Loading…
Reference in New Issue