blallo
/
presentazione-papero
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

auto-animate bug fixes + support for inheriting options from closest animated parent element

master
Hakim El Hattab 2 years ago
parent
f33ecadf5d
commit
1649bd0d98
3 changed files with 46 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      css/reveal.css
  2. 2
      css/reveal.scss
  3. 65
      js/reveal.js

2
css/reveal.css
View File

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

2
css/reveal.scss
View File

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

65
js/reveal.js
View File

@ -3886,7 +3886,7 @@
unmatchedElement.dataset.autoAnimateTarget = 'unmatched';
} );
css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: all '+ (animationOptions.duration*0.8) +'s ease '+ (animationOptions.duration*0.2) +'s; }' );
css.push( '[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: all '+ (animationOptions.duration*0.8) +'s ease '+ (animationOptions.duration*0.2) +'s; }' );
}
// Setting the whole chunk of CSS at once is the most
@ -3904,6 +3904,8 @@
}
} );
dispatchEvent( 'autoanimate', { fromSlide: fromSlide, toSlide: toSlide, sheet: autoAnimateStyleSheet } );
}
}
@ -3914,7 +3916,7 @@
*/
function removeEphemeralAutoAnimateAttributes() {
toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR + ':not(.stack) [data-auto-animate-target]' ) ).forEach( function( element ) {
toArray( dom.wrapper.querySelectorAll( '[data-auto-animate-target]' ) ).forEach( function( element ) {
delete element.dataset.autoAnimateTarget;
} );
@ -3956,28 +3958,31 @@
// of the 'from' element
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
var scale = Reveal.getScale();
var presentationScale = Reveal.getScale();
var delta = {
x: ( fromProps.x - toProps.x ) / scale,
y: ( fromProps.y - toProps.y ) / scale,
x: ( fromProps.x - toProps.x ) / presentationScale,
y: ( fromProps.y - toProps.y ) / presentationScale,
scaleX: fromProps.width / toProps.width,
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;
// Limit decimal points to avoid 0.0001px blur and stutter
delta.x = Math.round( delta.x * 1000 ) / 1000;
delta.y = Math.round( delta.y * 1000 ) / 1000;
delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
delta.scaleX = Math.round( delta.scaleX * 1000 ) / 1000;
var translate = elementOptions.translate !== false && ( delta.x !== 0 || delta.y !== 0 ),
scale = elementOptions.scale !== false && ( delta.scaleX !== 0 || delta.scaleY !== 0 );
// No need to transform if nothing's changed
if( delta.x !== 0 || delta.y !== 0 || delta.scaleX !== 1 || delta.scaleY !== 1 ) {
if( translate || scale ) {
var transform = [];
if( elementOptions.translate !== false ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' );
if( elementOptions.scale !== false ) transform.push( 'scale('+delta.scaleX+','+delta.scaleY+')' );
if( translate ) transform.push( 'translate('+delta.x+'px, '+delta.y+'px)' );
if( scale ) transform.push( 'scale('+delta.scaleX+','+delta.scaleY+')' );
fromProps.styles['transform'] = transform.join( ' ' );
fromProps.styles['transform-origin'] = 'top left';
@ -4031,9 +4036,8 @@
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
} ).join( '' );
css = '.reveal [data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
'.reveal [data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
css = '[data-auto-animate-target="'+ id +'"] {'+ fromCSS +'}' +
'[data-auto-animate="running"] [data-auto-animate-target="'+ id +'"] {'+ toCSS +'}';
}
@ -4046,10 +4050,10 @@
*
* @param {HTMLElement} element Element to pick up options
* from, either a slide or an animation target
* @param {Object} [inheritOptions] optional set of options
* to inherit as a base
* @param {Object} [inheritedOptions] Optional set of existing
* options
*/
function getAutoAnimateOptions( element, inheritOptions ) {
function getAutoAnimateOptions( element, inheritedOptions ) {
var options = {
easing: config.autoAnimateEasing,
@ -4057,7 +4061,15 @@
delay: 0
};
if( inheritOptions ) extend( options, inheritOptions );
if( inheritedOptions ) options = extend( options, inheritedOptions );
// Inherit options from parent elements
if( element.closest && element.parentNode ) {
var autoAnimatedParent = element.parentNode.closest( '[data-auto-animate-target]' );
if( autoAnimatedParent ) {
options = getAutoAnimateOptions( autoAnimatedParent, options );
}
}
if( element.dataset.autoAnimateEasing ) {
options.easing = element.dataset.autoAnimateEasing;
@ -4088,7 +4100,17 @@
// Position and size
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
var bounds = element.getBoundingClientRect();
var bounds;
// Custom auto-animate may optionally return a custom tailored
// measurement function
if( typeof elementOptions.measure === 'function' ) {
bounds = elementOptions.measure( element );
}
else {
bounds = element.getBoundingClientRect();
}
properties.x = bounds.x;
properties.y = bounds.y;
properties.width = bounds.width;
@ -6576,6 +6598,7 @@
getScale: function() {
return scale;
},
getComputedSlideSize: getComputedSlideSize,
// Returns the current configuration object

Write Preview
Loading…
Cancel
Save