support for fading in unmatched auto-animate elements
This commit is contained in:
parent
3cf08624dd
commit
15e6994569
@ -1226,6 +1226,15 @@ body {
|
|||||||
.reveal[data-transition-speed="slow"] > .backgrounds .slide-background {
|
.reveal[data-transition-speed="slow"] > .backgrounds .slide-background {
|
||||||
transition-duration: 1200ms; }
|
transition-duration: 1200ms; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* AUTO ANIMATE
|
||||||
|
*********************************************/
|
||||||
|
.reveal section[data-auto-animate] [data-auto-animate-unmatched="fade-in"] {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
|
.reveal section[data-auto-animate="running"] [data-auto-animate-unmatched="fade-in"] {
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* OVERVIEW
|
* OVERVIEW
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
@ -1310,6 +1310,18 @@ $controlsArrowAngleActive: 36deg;
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* AUTO ANIMATE
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal section[data-auto-animate] [data-auto-animate-unmatched="fade-in"] {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.reveal section[data-auto-animate="running"] [data-auto-animate-unmatched="fade-in"] {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* OVERVIEW
|
* OVERVIEW
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
81
js/reveal.js
81
js/reveal.js
@ -1431,9 +1431,8 @@
|
|||||||
toArray( dom.slides.querySelectorAll( '[data-auto-animate]:not([data-auto-animate=""])' ) ).forEach( function( element ) {
|
toArray( dom.slides.querySelectorAll( '[data-auto-animate]:not([data-auto-animate=""])' ) ).forEach( function( element ) {
|
||||||
element.dataset.autoAnimate = '';
|
element.dataset.autoAnimate = '';
|
||||||
} );
|
} );
|
||||||
toArray( dom.wrapper.querySelectorAll( '[data-auto-animate-target]' ) ).forEach( function( element ) {
|
|
||||||
delete element.dataset.autoAnimateTarget;
|
removeEphemeralAutoAnimateAttributes();
|
||||||
} );
|
|
||||||
|
|
||||||
if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
|
if( autoAnimateStyleSheet && autoAnimateStyleSheet.parentNode ) {
|
||||||
autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
|
autoAnimateStyleSheet.parentNode.removeChild( autoAnimateStyleSheet );
|
||||||
@ -3849,10 +3848,8 @@
|
|||||||
autoAnimateStyleSheet.innerHTML = '';
|
autoAnimateStyleSheet.innerHTML = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clean up from previous animations
|
// Clean up after prior animations
|
||||||
toArray( document.querySelectorAll( '[data-auto-animate-target]' ) ).forEach( function( element ) {
|
removeEphemeralAutoAnimateAttributes();
|
||||||
delete element.dataset.autoAnimateTarget;
|
|
||||||
} );
|
|
||||||
|
|
||||||
var slideOptions = getAutoAnimateOptions( toSlide, {
|
var slideOptions = getAutoAnimateOptions( toSlide, {
|
||||||
|
|
||||||
@ -3868,9 +3865,21 @@
|
|||||||
toSlide.dataset.autoAnimate = 'pending';
|
toSlide.dataset.autoAnimate = 'pending';
|
||||||
|
|
||||||
// Inject our auto-animate styles for this transition
|
// Inject our auto-animate styles for this transition
|
||||||
autoAnimateStyleSheet.innerHTML = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
|
var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
|
||||||
return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, slideOptions, autoAnimateCounter++ );
|
return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, slideOptions, autoAnimateCounter++ );
|
||||||
} ).join( '' );
|
} );
|
||||||
|
|
||||||
|
// If the slide is configured to animate unmatched elements we
|
||||||
|
// need to flag them
|
||||||
|
if( toSlide.dataset.autoAnimateUnmatched ) {
|
||||||
|
getUnmatchedAutoAnimateElements( toSlide ).forEach( function( unmatchedElement ) {
|
||||||
|
unmatchedElement.dataset.autoAnimateUnmatched = 'fade-in';
|
||||||
|
} );
|
||||||
|
|
||||||
|
css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-unmatched] { transition: all '+ (slideOptions.duration*0.8) +'s ease '+ (slideOptions.duration*0.2) +'s; }' );
|
||||||
|
}
|
||||||
|
|
||||||
|
autoAnimateStyleSheet.innerHTML = css.join( '' );
|
||||||
|
|
||||||
// Start the animation next cycle
|
// Start the animation next cycle
|
||||||
requestAnimationFrame( function() {
|
requestAnimationFrame( function() {
|
||||||
@ -3879,6 +3888,22 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes all attributes that we temporarily add to slide
|
||||||
|
* elements in order to carry out auto-animation.
|
||||||
|
*/
|
||||||
|
function removeEphemeralAutoAnimateAttributes() {
|
||||||
|
|
||||||
|
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack) [data-auto-animate-target]' ) ).forEach( function( element ) {
|
||||||
|
delete element.dataset.autoAnimateTarget;
|
||||||
|
} );
|
||||||
|
|
||||||
|
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack) [data-auto-animate-unmatched]' ) ).forEach( function( element ) {
|
||||||
|
delete element.dataset.autoAnimateUnmatched;
|
||||||
|
} );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Auto-animates the properties of an element from their original
|
* Auto-animates the properties of an element from their original
|
||||||
* values to their new state.
|
* values to their new state.
|
||||||
@ -4139,6 +4164,44 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns a all elements within the given scope that should
|
||||||
|
* be considered unmatched in an auto-animate transition. If
|
||||||
|
* fading of unmatched elements is turnded on, these elements
|
||||||
|
* will fade when going between auto-aniamted slides.
|
||||||
|
*
|
||||||
|
* Note that parents of auto-animate targets are NOT considerd
|
||||||
|
* unmatched since fading them would break the auto-animation.
|
||||||
|
*
|
||||||
|
* @param {HTMLElement} rootElement
|
||||||
|
* @return {Array}
|
||||||
|
*/
|
||||||
|
function getUnmatchedAutoAnimateElements( rootElement ) {
|
||||||
|
|
||||||
|
return [].slice.call( rootElement.children ).reduce( function( result, element ) {
|
||||||
|
|
||||||
|
// If the element is auto-animated we can stop looking at this tree
|
||||||
|
if( !element.hasAttribute( 'data-auto-animate-target' ) ) {
|
||||||
|
|
||||||
|
// If this element contains an auto-animated element it's considered
|
||||||
|
// a match since we can't fade it without affecting the inner
|
||||||
|
// auto-animate target
|
||||||
|
if( !element.querySelector( '[data-auto-animate-target]' ) ) {
|
||||||
|
result.push( element );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Keep looking down this tree
|
||||||
|
result = result.concat( getUnmatchedAutoAnimateElements( element ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
|
||||||
|
}, [] );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Should the given element be preloaded?
|
* Should the given element be preloaded?
|
||||||
* Decides based on local element attributes and global config.
|
* Decides based on local element attributes and global config.
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<section data-auto-animate>
|
<section data-auto-animate data-auto-animate-unmatched="fade">
|
||||||
<h3>Auto-Animate Example</h3>
|
<h3>Auto-Animate Example</h3>
|
||||||
<p>This will fade out</p>
|
<p>This will fade out</p>
|
||||||
<img src="assets/image1.png" style="height: 100px;">
|
<img src="assets/image1.png" style="height: 100px;">
|
||||||
|
Loading…
Reference in New Issue
Block a user