dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

auto-animate performance improvements, dont animate unchanged properties

This commit is contained in:
Hakim El Hattab 2020-02-13 08:41:20 +01:00
parent 15e6994569
commit 1757aacaab
1 changed files with 52 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
js/reveal.js
View File

@ -3935,12 +3935,6 @@
var fromProps = getAutoAnimatableProperties( 'from', from, elementOptions ), var fromProps = getAutoAnimatableProperties( 'from', from, elementOptions ),
toProps = getAutoAnimatableProperties( 'to', to, elementOptions ); toProps = getAutoAnimatableProperties( 'to', to, elementOptions );
// Instantly move to the 'from' state
fromProps.styles['transition'] = 'none';
// transition to the 'to' state
toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's';
// If translation and/or scaling are enabled, css transform // If translation and/or scaling are enabled, css transform
// the 'to' element so that it matches the position and size // the 'to' element so that it matches the position and size
// of the 'from' element // of the 'from' element
@ -3953,35 +3947,58 @@
scaleY: fromProps.height / toProps.height scaleY: fromProps.height / toProps.height
}; };
var transform = []; // No need to transform if nothing's changed
if( delta.x !== 0 || delta.y !== 0 || delta.scaleX !== 1 || delta.scaleY !== 1 ) {
if( elementOptions.translate !== false ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' ); var transform = [];
if( elementOptions.scale !== false ) transform.push( 'scale('+delta.scaleX+','+delta.scaleY+')' );
fromProps.styles['transform'] = transform.join( ' ' ); if( elementOptions.translate !== false ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' );
fromProps.styles['transform-origin'] = 'top left'; if( elementOptions.scale !== false ) transform.push( 'scale('+delta.scaleX+','+delta.scaleY+')' );
toProps.styles['transform'] = 'none'; fromProps.styles['transform'] = transform.join( ' ' );
fromProps.styles['transform-origin'] = 'top left';
toProps.styles['transform'] = 'none';
}
} }
// Build up our custom CSS. We need to override inline styles // Delete all unchanged 'to' styles
// so we need to make our styles vErY IMPORTANT!1!! for( var propertyName in toProps.styles ) {
var fromCSS = Object.keys( fromProps.styles ).map( function( propertyName ) { if( toProps.styles[propertyName] === fromProps.styles[propertyName] ) {
return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;'; delete toProps.styles[propertyName];
} ).join( '' ); }
};
var toCSS = Object.keys( toProps.styles ).map( function( propertyName ) { var css = '';
if( toProps.styles[propertyName] !== fromProps.styles[propertyName] ) {
// Only create animate this element IF at least one style
// property has changed
if( Object.keys( toProps.styles ).length > 0 ) {
// Instantly move to the 'from' state
fromProps.styles['transition'] = 'none';
// transition to the 'to' state
toProps.styles['transition'] = 'all '+ options.duration +'s '+ options.easing + ' ' + options.delay + 's';
// Build up our custom CSS. We need to override inline styles
// so we need to make our styles vErY IMPORTANT!1!!
var fromCSS = Object.keys( fromProps.styles ).map( function( propertyName ) {
return propertyName + ': ' + fromProps.styles[propertyName] + ' !important;';
} ).join( '' );
var toCSS = Object.keys( toProps.styles ).map( function( propertyName ) {
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;'; return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
} } ).join( '' );
else {
return '';
}
} ).join( '' );
return '.reveal [data-auto-animate] [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' + css = '.reveal [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
'.reveal [data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}'; '.reveal [data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
}
return css;
} }
@ -4180,20 +4197,17 @@
return [].slice.call( rootElement.children ).reduce( function( result, element ) { return [].slice.call( rootElement.children ).reduce( function( result, element ) {
// If the element is auto-animated we can stop looking at this tree var containsAnimatedElements = element.querySelector( '[data-auto-animate-target]' );
if( !element.hasAttribute( 'data-auto-animate-target' ) ) {
// If this element contains an auto-animated element it's considered // The element is unmatched if
// a match since we can't fade it without affecting the inner // - It is not an auto-animate target
// auto-animate target // - It does not contain any auto-animate targets
if( !element.querySelector( '[data-auto-animate-target]' ) ) { if( !element.hasAttribute( 'data-auto-animate-target' ) && !containsAnimatedElements ) {
result.push( element ); result.push( element );
} }
else {
// Keep looking down this tree
result = result.concat( getUnmatchedAutoAnimateElements( element ) );
}
if( element.querySelector( '[data-auto-animate-target]' ) ) {
result = result.concat( getUnmatchedAutoAnimateElements( element ) );
} }
return result; return result;