implement a fade transition

This commit is contained in:
Joel Brandt 2013-01-16 12:49:10 -08:00
parent feaced800c
commit 082e4ed168
6 changed files with 51 additions and 8 deletions

View File

@ -92,7 +92,7 @@ Reveal.initialize({
rollingLinks: true, rollingLinks: true,
// Transition style // Transition style
transition: 'default' // default/cube/page/concave/zoom/linear/none transition: 'default' // default/cube/page/concave/zoom/linear/fade/none
}); });
``` ```

View File

@ -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 * NO TRANSITION

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -151,6 +151,7 @@
<a href="?transition=concave#/transitions">Concave</a> - <a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a> - <a href="?transition=zoom#/transitions">Zoom</a> -
<a href="?transition=linear#/transitions">Linear</a> - <a href="?transition=linear#/transitions">Linear</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=none#/transitions">None</a> - <a href="?transition=none#/transitions">None</a> -
<a href="?#/transitions">Default</a> <a href="?#/transitions">Default</a>
</p> </p>
@ -354,7 +355,7 @@ function linkify( selector ) {
center: true, center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme 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 // Optional libraries used to extend on reveal.js
dependencies: [ dependencies: [

View File

@ -51,11 +51,11 @@ var Reveal = (function(){
// Apply a 3D roll to links on hover // Apply a 3D roll to links on hover
rollingLinks: true, rollingLinks: true,
// Transition style (see /css/theme) // Theme (see /css/theme)
theme: null, theme: null,
// Transition style // 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 // Script dependencies to load
dependencies: [] dependencies: []
@ -106,6 +106,9 @@ var Reveal = (function(){
// A delay used to ativate the overview mode // A delay used to ativate the overview mode
activateOverviewTimeout = 0, activateOverviewTimeout = 0,
// A delay used to deativate the overview mode
deactivateOverviewTimeout = 0,
// Holds information about the currently ongoing touch input // Holds information about the currently ongoing touch input
touch = { touch = {
startX: 0, startX: 0,
@ -583,8 +586,9 @@ var Reveal = (function(){
if( config.overview ) { if( config.overview ) {
dom.wrapper.classList.add( 'overview' ); dom.wrapper.classList.add( 'overview' );
dom.wrapper.classList.remove( 'exit-overview' );
clearTimeout( activateOverviewTimeout ); clearTimeout( activateOverviewTimeout );
clearTimeout( deactivateOverviewTimeout );
// Not the pretties solution, but need to let the overview // Not the pretties solution, but need to let the overview
// class apply first so that slides are measured accurately // class apply first so that slides are measured accurately
@ -655,8 +659,16 @@ var Reveal = (function(){
if( config.overview ) { if( config.overview ) {
clearTimeout( activateOverviewTimeout ); clearTimeout( activateOverviewTimeout );
clearTimeout( deactivateOverviewTimeout );
dom.wrapper.classList.remove( 'overview' ); 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 // Select all slides
var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) ); var slides = toArray( document.querySelectorAll( SLIDES_SELECTOR ) );

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long