Shivan
/
tubestats-presentation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

auto-animate tweaks and new config options

This commit is contained in:
Hakim El Hattab 2020-02-20 20:15:41 +01:00
parent 4eca625330
commit f633a18fdf
3 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/reveal.css
View File

@ -1233,12 +1233,9 @@ body {
/********************************************* /*********************************************
* AUTO ANIMATE * AUTO ANIMATE
*********************************************/ *********************************************/
.reveal section[data-auto-animate] [data-auto-animate-target="unmatched"] { .reveal section[data-auto-animate]:not([data-auto-animate="running"]) [data-auto-animate-target="unmatched"] {
opacity: 0; } opacity: 0; }
.reveal section[data-auto-animate="running"] [data-auto-animate-target="unmatched"] {
opacity: 1; }
/********************************************* /*********************************************
* OVERVIEW * OVERVIEW
*********************************************/ *********************************************/

5
css/reveal.scss
View File

@ -1318,12 +1318,9 @@ $controlsArrowAngleActive: 36deg;
* AUTO ANIMATE * AUTO ANIMATE
*********************************************/ *********************************************/
.reveal section[data-auto-animate] [data-auto-animate-target="unmatched"] { .reveal section[data-auto-animate]:not([data-auto-animate="running"]) [data-auto-animate-target="unmatched"] {
opacity: 0; opacity: 0;
} }
.reveal section[data-auto-animate="running"] [data-auto-animate-target="unmatched"] {
opacity: 1;
}
/********************************************* /*********************************************

34
js/reveal.js
View File

@ -198,10 +198,11 @@
// used to dictate which elements we can animate between. // used to dictate which elements we can animate between.
autoAnimateMatcher: null, autoAnimateMatcher: null,
// Default settings for or auto-animate transitions, can be // Default settings for our auto-animate transitions, can be
// overridden per-slide or per-element via data arguments // overridden per-slide or per-element via data arguments
autoAnimateEasing: 'ease', autoAnimateEasing: 'ease',
autoAnimateDuration: 1.0, autoAnimateDuration: 1.0,
autoAnimateUnmatched: true,
// CSS properties that can be auto-animated. Position & scale // CSS properties that can be auto-animated. Position & scale
// is matched separately so there's no need to include styles // is matched separately so there's no need to include styles
@ -3879,9 +3880,8 @@
return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ ); return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
} ); } );
// If the slide is configured to animate unmatched elements we // Animate unmatched elements, if enabled
// need to flag them if( toSlide.dataset.autoAnimateUnmatched !== 'false' && config.autoAnimateUnmatched === true ) {
if( toSlide.dataset.autoAnimateUnmatched ) {
getUnmatchedAutoAnimateElements( toSlide ).forEach( function( unmatchedElement ) { getUnmatchedAutoAnimateElements( toSlide ).forEach( function( unmatchedElement ) {
unmatchedElement.dataset.autoAnimateTarget = 'unmatched'; unmatchedElement.dataset.autoAnimateTarget = 'unmatched';
} ); } );
@ -3965,6 +3965,12 @@
scaleY: fromProps.height / toProps.height scaleY: fromProps.height / toProps.height
}; };
// Limit decimal points to avoid 0.00001px blur and stutter
delta.x = Math.round( delta.x * 100000 ) / 100000;
delta.y = Math.round( delta.y * 100000 ) / 100000;
delta.scaleX = Math.round( delta.scaleX * 100000 ) / 100000;
delta.scaleX = Math.round( delta.scaleX * 100000 ) / 100000;
// No need to transform if nothing's changed // No need to transform if nothing's changed
if( delta.x !== 0 || delta.y !== 0 || delta.scaleX !== 1 || delta.scaleY !== 1 ) { if( delta.x !== 0 || delta.y !== 0 || delta.scaleX !== 1 || delta.scaleY !== 1 ) {
@ -3984,9 +3990,23 @@
// Delete all unchanged 'to' styles // Delete all unchanged 'to' styles
for( var propertyName in toProps.styles ) { for( var propertyName in toProps.styles ) {
if( toProps.styles[propertyName] === fromProps.styles[propertyName] ) { var toValue = toProps.styles[propertyName];
var fromValue = fromProps.styles[propertyName];
if( toValue === fromValue ) {
delete toProps.styles[propertyName]; delete toProps.styles[propertyName];
} }
else {
// If these property values were set via a custom matcher providing
// an explicit 'from' and/or 'to' value, we always inject those values.
if( toValue.explicitValue === true ) {
toProps.styles[propertyName] = toValue.value;
}
if( fromValue.explicitValue === true ) {
fromProps.styles[propertyName] = fromValue.value;
}
}
} }
var css = ''; var css = '';
@ -4086,10 +4106,10 @@
if( typeof style === 'string' ) style = { property: style }; if( typeof style === 'string' ) style = { property: style };
if( typeof style.from !== 'undefined' && direction === 'from' ) { if( typeof style.from !== 'undefined' && direction === 'from' ) {
value = style.from; value = { value: style.from, explicitValue: true };
} }
else if( typeof style.to !== 'undefined' && direction === 'to' ) { else if( typeof style.to !== 'undefined' && direction === 'to' ) {
value = style.to; value = { value: style.to, explicitValue: true };
} }
else { else {
value = computedStyles[style.property]; value = computedStyles[style.property];