auto-match animatable targets by their contents
This commit is contained in:
parent
3bfd06c06d
commit
452f62286b
2 changed files with 92 additions and 24 deletions
88
js/reveal.js
88
js/reveal.js
|
@ -3836,17 +3836,8 @@
|
||||||
options.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) );
|
options.duration = parseFloat( toSlide.getAttribute( 'data-auto-animate-duration' ) );
|
||||||
}
|
}
|
||||||
|
|
||||||
var fromTargets = {};
|
getAutoAnimatableElements( fromSlide, toSlide ).forEach( function( elements ) {
|
||||||
|
autoAnimateElement( elements[0], elements[1], options );
|
||||||
toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
|
|
||||||
fromTargets[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
|
|
||||||
} );
|
|
||||||
|
|
||||||
toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
|
|
||||||
var fromElement = fromTargets[ toElement.getAttribute( 'data-id' ) ];
|
|
||||||
if( fromElement ) {
|
|
||||||
autoAnimateElement( fromElement, toElement, options );
|
|
||||||
}
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3947,6 +3938,81 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [getAutoAnimatableElements description]
|
||||||
|
* @param {HTMLElement} fromSlide
|
||||||
|
* @param {HTMLElement} toSlide
|
||||||
|
*
|
||||||
|
* @return {Array} Each value is an array where [0] is
|
||||||
|
* the element we're animating from and [1] is the
|
||||||
|
* element we're animating to
|
||||||
|
*/
|
||||||
|
function getAutoAnimatableElements( fromSlide, toSlide ) {
|
||||||
|
|
||||||
|
var pairs = findImplicitAutoAnimatePairs( fromSlide, toSlide )
|
||||||
|
.concat( findExplicitAutoAnimatePairs( fromSlide, toSlide ) );
|
||||||
|
|
||||||
|
// Remove duplicate pairs
|
||||||
|
pairs = pairs.filter( function( pair, index ) {
|
||||||
|
return index === pairs.findIndex( function( comparePair ) {
|
||||||
|
return pair[0] === comparePair[0] && pair[1] === comparePair[1];
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
return pairs;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns an array of auto-animate element pairs
|
||||||
|
* discovered through implicing means such as matching
|
||||||
|
* text content.
|
||||||
|
*/
|
||||||
|
function findImplicitAutoAnimatePairs( fromSlide, toSlide ) {
|
||||||
|
|
||||||
|
var textSelector = 'h1, h2, h3, h4, h5, h6, p, li, span';
|
||||||
|
|
||||||
|
var pairs = [];
|
||||||
|
var fromHash = {};
|
||||||
|
|
||||||
|
toArray( fromSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
|
||||||
|
fromHash[ element.nodeName+':::'+element.textContent ] = element;
|
||||||
|
} );
|
||||||
|
|
||||||
|
toArray( toSlide.querySelectorAll( textSelector ) ).forEach( function( element ) {
|
||||||
|
var fromElement = fromHash[ element.nodeName+':::'+element.textContent ];
|
||||||
|
if( fromElement ) {
|
||||||
|
pairs.push([ fromElement, element ]);
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
return pairs;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns explicitly ID-matched auto-animate elements.
|
||||||
|
*/
|
||||||
|
function findExplicitAutoAnimatePairs( fromSlide, toSlide ) {
|
||||||
|
|
||||||
|
var pairs = [];
|
||||||
|
var fromHash = {};
|
||||||
|
|
||||||
|
toArray( fromSlide.querySelectorAll( '[data-id]' ) ).forEach( function( fromElement ) {
|
||||||
|
fromHash[ fromElement.getAttribute( 'data-id' ) ] = fromElement;
|
||||||
|
} );
|
||||||
|
|
||||||
|
toArray( toSlide.querySelectorAll( '[data-id]' ) ).forEach( function( toElement ) {
|
||||||
|
var fromElement = fromHash[ toElement.getAttribute( 'data-id' ) ];
|
||||||
|
if( fromElement ) {
|
||||||
|
pairs.push([ fromElement, toElement ]);
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
|
||||||
|
return pairs;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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,12 +19,14 @@
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h3 data-id="opacity-title">Fade and slide</h3>
|
<h3>Auto-Matched Content (no IDs)</h3>
|
||||||
<h3 data-id="opacity-test">Opacity 1.0</h3>
|
<h3>This will fade out</h3>
|
||||||
|
<img src="assets/image1.png">
|
||||||
</section>
|
</section>
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h3 data-id="opacity-title">Fade and slide</h3>
|
<h3>Auto-Matched Content (no IDs)</h3>
|
||||||
<h3 data-id="opacity-test" style="opacity: 0.2; margin-top: 200px;">Opacity 0.2</h3>
|
<h3 style="opacity: 0.2; margin-top: 200px;">This will fade out</h3>
|
||||||
|
<img src="assets/image1.png">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
|
@ -37,25 +39,25 @@
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h3>Swapping list items</h3>
|
<h3>Swapping list items</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li data-id="li-1">One</li>
|
<li>One</li>
|
||||||
<li data-id="li-2">Two</li>
|
<li>Two</li>
|
||||||
<li data-id="li-3">Three</li>
|
<li>Three</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h3>Swapping list items</h3>
|
<h3>Swapping list items</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li data-id="li-2">Two</li>
|
<li>Two</li>
|
||||||
<li data-id="li-1">One</li>
|
<li>One</li>
|
||||||
<li data-id="li-3">Three</li>
|
<li>Three</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section data-auto-animate>
|
<section data-auto-animate>
|
||||||
<h3>Swapping list items</h3>
|
<h3>Swapping list items</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li data-id="li-2">Two</li>
|
<li>Two</li>
|
||||||
<li data-id="li-3">Three</li>
|
<li>Three</li>
|
||||||
<li data-id="li-1">One</li>
|
<li>One</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue