simplify auto-animate styles

This commit is contained in:
Hakim El Hattab 2020-02-11 19:15:45 +01:00
parent 84b2fb42c6
commit 3cf08624dd
2 changed files with 47 additions and 17 deletions

View File

@ -326,6 +326,36 @@ Reveal.initialize({
// - false: All iframes with data-src will be loaded only when visible // - false: All iframes with data-src will be loaded only when visible
preloadIframes: null, preloadIframes: null,
// Can be used to globally disable auto-animation
autoAnimate: true,
// Optionally provide a custom element matcher that will be
// used to dictate which elements we can animate between.
autoAnimateMatcher: null,
// Default settings for or auto-animate transitions, can be
// overridden per-slide or per-element via data arguments
autoAnimateEasing: 'ease',
autoAnimateDuration: 1.0,
// CSS properties that can be auto-animated. Position & scale
// is matched separately so there's no need to include styles
// like top/right/bottom/left, width/height or margin.
autoAnimateStyles: [
'opacity',
'color',
'background-color',
'padding',
'font-size',
'line-height',
'letter-spacing',
'border-width',
'border-color',
'border-radius',
'outline',
'outline-offset'
],
// Number of milliseconds between automatically proceeding to the // Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten // next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides // by using a data-autoslide attribute on your slides

View File

@ -190,17 +190,18 @@
// Can be used to globally disable auto-animation // Can be used to globally disable auto-animation
autoAnimate: true, autoAnimate: true,
// Optionally provide a custom element matcher function, // Optionally provide a custom element matcher that will be
// the function needs to return an array where each value is // used to dictate which elements we can animate between.
// an array of animation pairs [fromElement, toElement]
autoAnimateMatcher: null, autoAnimateMatcher: null,
// Default settings for or auto-animate transitions, can be // Default settings for or auto-animate transitions, can be
// overridden per-slide via data arguments // overridden per-slide or per-element via data arguments
autoAnimateEasing: 'ease', autoAnimateEasing: 'ease',
autoAnimateDuration: 1.0, autoAnimateDuration: 1.0,
// CSS styles that auto-animations will animate between // CSS properties that can be auto-animated. Position & scale
// is matched separately so there's no need to include styles
// like top/right/bottom/left, width/height or margin.
autoAnimateStyles: [ autoAnimateStyles: [
'opacity', 'opacity',
'color', 'color',
@ -211,10 +212,9 @@
'letter-spacing', 'letter-spacing',
'border-width', 'border-width',
'border-color', 'border-color',
'border-top-left-radius', 'border-radius',
'border-top-right-radius', 'outline',
'border-bottom-left-radius', 'outline-offset'
'border-bottom-right-radius'
], ],
// Controls automatic progression to the next slide // Controls automatic progression to the next slide
@ -3869,7 +3869,7 @@
// Inject our auto-animate styles for this transition // Inject our auto-animate styles for this transition
autoAnimateStyleSheet.innerHTML = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) { autoAnimateStyleSheet.innerHTML = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
return getAutoAnimateCSS( elements[0], elements[1], elements[2] || {}, slideOptions, autoAnimateCounter++ ); return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, slideOptions, autoAnimateCounter++ );
} ).join( '' ); } ).join( '' );
// Start the animation next cycle // Start the animation next cycle
@ -3916,9 +3916,9 @@
// transition to the 'to' state // transition to the 'to' state
toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's'; toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's';
// If translation and/or scalin are enabled, offset the // If translation and/or scaling are enabled, css transform
// 'to' element so that it starts out at the same position // the 'to' element so that it matches the position and size
// and scale as the 'from' element // of the 'from' element
if( elementOptions.translate !== false || elementOptions.scale !== false ) { if( elementOptions.translate !== false || elementOptions.scale !== false ) {
var delta = { var delta = {
@ -4062,7 +4062,7 @@
// Remove duplicate pairs // Remove duplicate pairs
return pairs.filter( function( pair, index ) { return pairs.filter( function( pair, index ) {
return index === pairs.findIndex( function( comparePair ) { return index === pairs.findIndex( function( comparePair ) {
return pair[0] === comparePair[0] && pair[1] === comparePair[1]; return pair.from === comparePair.from && pair.to === comparePair.to;
} ); } );
} ); } );
@ -4091,7 +4091,7 @@
if( typeof transformer === 'function' ) element = transformer( element ); if( typeof transformer === 'function' ) element = transformer( element );
var fromElement = fromHash[ serializer( element ) ]; var fromElement = fromHash[ serializer( element ) ];
if( fromElement ) { if( fromElement ) {
pairs.push([ fromElement, element ]); pairs.push({ from: fromElement, to: element });
} }
} ); } );
@ -4124,13 +4124,13 @@
pairs.forEach( function( pair ) { pairs.forEach( function( pair ) {
var fromElement = pair[0]; var fromElement = pair.from;
var matchesMethod = fromElement.matches || fromElement.matchesSelector || fromElement.msMatchesSelector; var matchesMethod = fromElement.matches || fromElement.matchesSelector || fromElement.msMatchesSelector;
// Disable scale transformations on text nodes, we transiition // Disable scale transformations on text nodes, we transiition
// each individual text property instead // each individual text property instead
if( matchesMethod.call( fromElement, textNodes ) ) { if( matchesMethod.call( fromElement, textNodes ) ) {
pair[2] = { scale: false }; pair.options = { scale: false };
} }
} ); } );