Shivan
/
tubestats-presentation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki 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

58
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,6 +3947,9 @@
scaleY: fromProps.height / toProps.height scaleY: fromProps.height / toProps.height
}; };
// No need to transform if nothing's changed
if( delta.x !== 0 || delta.y !== 0 || delta.scaleX !== 1 || delta.scaleY !== 1 ) {
var transform = []; var transform = [];
if( elementOptions.translate !== false ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' ); if( elementOptions.translate !== false ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' );
@ -3965,6 +3962,27 @@
} }
}
// Delete all unchanged 'to' styles
for( var propertyName in toProps.styles ) {
if( toProps.styles[propertyName] === fromProps.styles[propertyName] ) {
delete toProps.styles[propertyName];
}
};
var css = '';
// 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 // Build up our custom CSS. We need to override inline styles
// so we need to make our styles vErY IMPORTANT!1!! // so we need to make our styles vErY IMPORTANT!1!!
var fromCSS = Object.keys( fromProps.styles ).map( function( propertyName ) { var fromCSS = Object.keys( fromProps.styles ).map( function( propertyName ) {
@ -3972,19 +3990,18 @@
} ).join( '' ); } ).join( '' );
var toCSS = Object.keys( toProps.styles ).map( function( propertyName ) { var toCSS = Object.keys( toProps.styles ).map( function( propertyName ) {
if( toProps.styles[propertyName] !== fromProps.styles[propertyName] ) {
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;'; return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
}
else {
return '';
}
} ).join( '' ); } ).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;
}
/** /**
* Returns the auto-animate options for the given element. * Returns the auto-animate options for the given element.
* *
@ -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;