switch to bounding rect for auto-animate deltas
This commit is contained in:
parent
ac59dcb525
commit
4ff7fd3a71
|
@ -1045,6 +1045,10 @@ body {
|
||||||
.reveal .slides.disable-slide-transitions section {
|
.reveal .slides.disable-slide-transitions section {
|
||||||
transition: none !important; }
|
transition: none !important; }
|
||||||
|
|
||||||
|
.reveal .slides.disable-slide-transitions section {
|
||||||
|
-webkit-transform: none !important;
|
||||||
|
transform: none !important; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PER-SLIDE BACKGROUNDS
|
* PER-SLIDE BACKGROUNDS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
|
@ -1123,6 +1123,10 @@ $controlsArrowAngleActive: 36deg;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal .slides.disable-slide-transitions section {
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PER-SLIDE BACKGROUNDS
|
* PER-SLIDE BACKGROUNDS
|
||||||
|
|
37
js/reveal.js
37
js/reveal.js
|
@ -3868,14 +3868,7 @@
|
||||||
autoAnimateStyleSheet.type = 'text/css';
|
autoAnimateStyleSheet.type = 'text/css';
|
||||||
document.head.appendChild( autoAnimateStyleSheet );
|
document.head.appendChild( autoAnimateStyleSheet );
|
||||||
|
|
||||||
var slideOptions = getAutoAnimateOptions( toSlide, {
|
var animationOptions = getAutoAnimateOptions( toSlide );
|
||||||
|
|
||||||
// If our slides are centered vertically, we need to
|
|
||||||
// account for their difference in position when
|
|
||||||
// calculating deltas for animated elements
|
|
||||||
offsetY: config.center ? fromSlide.offsetTop - toSlide.offsetTop : 0
|
|
||||||
|
|
||||||
} );
|
|
||||||
|
|
||||||
// Set our starting state
|
// Set our starting state
|
||||||
fromSlide.dataset.autoAnimate = 'pending';
|
fromSlide.dataset.autoAnimate = 'pending';
|
||||||
|
@ -3883,7 +3876,7 @@
|
||||||
|
|
||||||
// Inject our auto-animate styles for this transition
|
// Inject our auto-animate styles for this transition
|
||||||
var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
|
var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
|
||||||
return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, slideOptions, autoAnimateCounter++ );
|
return getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// If the slide is configured to animate unmatched elements we
|
// If the slide is configured to animate unmatched elements we
|
||||||
|
@ -3893,7 +3886,7 @@
|
||||||
unmatchedElement.dataset.autoAnimateUnmatched = 'fade-in';
|
unmatchedElement.dataset.autoAnimateUnmatched = 'fade-in';
|
||||||
} );
|
} );
|
||||||
|
|
||||||
css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-unmatched] { transition: all '+ (slideOptions.duration*0.8) +'s ease '+ (slideOptions.duration*0.2) +'s; }' );
|
css.push( '.reveal [data-auto-animate="running"] [data-auto-animate-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
|
// Setting the whole chunk of CSS at once is the most
|
||||||
|
@ -3938,11 +3931,11 @@
|
||||||
* @param {HTMLElement} from
|
* @param {HTMLElement} from
|
||||||
* @param {HTMLElement} to
|
* @param {HTMLElement} to
|
||||||
* @param {Object} elementOptions Options for this element pair
|
* @param {Object} elementOptions Options for this element pair
|
||||||
* @param {Object} slideOptions Options set at the slide level
|
* @param {Object} animationOptions Options set at the slide level
|
||||||
* @param {String} id Unique ID that we can use to identify this
|
* @param {String} id Unique ID that we can use to identify this
|
||||||
* auto-animate element in the DOM
|
* auto-animate element in the DOM
|
||||||
*/
|
*/
|
||||||
function getAutoAnimateCSS( from, to, elementOptions, slideOptions, id ) {
|
function getAutoAnimateCSS( from, to, elementOptions, animationOptions, id ) {
|
||||||
|
|
||||||
// 'from' elements are given a data-auto-animate-target with no value,
|
// 'from' elements are given a data-auto-animate-target with no value,
|
||||||
// 'to' elements are are given a data-auto-animate-target with an ID
|
// 'to' elements are are given a data-auto-animate-target with an ID
|
||||||
|
@ -3951,7 +3944,7 @@
|
||||||
|
|
||||||
// Each element may override any of the auto-animate options
|
// Each element may override any of the auto-animate options
|
||||||
// like transition easing, duration and delay via data-attributes
|
// like transition easing, duration and delay via data-attributes
|
||||||
var options = getAutoAnimateOptions( to, slideOptions );
|
var options = getAutoAnimateOptions( to, animationOptions );
|
||||||
|
|
||||||
// If we're using a custom element matcher the element options
|
// If we're using a custom element matcher the element options
|
||||||
// may contain additional transition overrides
|
// may contain additional transition overrides
|
||||||
|
@ -3967,9 +3960,11 @@
|
||||||
// of the 'from' element
|
// of the 'from' element
|
||||||
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
|
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
|
||||||
|
|
||||||
|
var scale = Reveal.getScale();
|
||||||
|
|
||||||
var delta = {
|
var delta = {
|
||||||
x: fromProps.x - toProps.x,
|
x: ( fromProps.x - toProps.x ) / scale,
|
||||||
y: fromProps.y - toProps.y + options.offsetY,
|
y: ( fromProps.y - toProps.y ) / scale,
|
||||||
scaleX: fromProps.width / toProps.width,
|
scaleX: fromProps.width / toProps.width,
|
||||||
scaleY: fromProps.height / toProps.height
|
scaleY: fromProps.height / toProps.height
|
||||||
};
|
};
|
||||||
|
@ -4007,7 +4002,7 @@
|
||||||
// Instantly move to the 'from' state
|
// Instantly move to the 'from' state
|
||||||
fromProps.styles['transition'] = 'none';
|
fromProps.styles['transition'] = 'none';
|
||||||
|
|
||||||
// transition to the 'to' state
|
// Animate towards 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';
|
||||||
|
|
||||||
// Build up our custom CSS. We need to override inline styles
|
// Build up our custom CSS. We need to override inline styles
|
||||||
|
@ -4020,6 +4015,7 @@
|
||||||
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
|
return propertyName + ': ' + toProps.styles[propertyName] + ' !important;';
|
||||||
} ).join( '' );
|
} ).join( '' );
|
||||||
|
|
||||||
|
|
||||||
css = '.reveal [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 +'}';
|
||||||
|
|
||||||
|
@ -4076,10 +4072,11 @@
|
||||||
|
|
||||||
// Position and size
|
// Position and size
|
||||||
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
|
if( elementOptions.translate !== false || elementOptions.scale !== false ) {
|
||||||
properties.x = element.offsetLeft;
|
var bounds = element.getBoundingClientRect();
|
||||||
properties.y = element.offsetTop;
|
properties.x = bounds.x;
|
||||||
properties.width = element.offsetWidth;
|
properties.y = bounds.y;
|
||||||
properties.height = element.offsetHeight;
|
properties.width = bounds.width;
|
||||||
|
properties.height = bounds.height;
|
||||||
}
|
}
|
||||||
|
|
||||||
var computedStyles = getComputedStyle( element );
|
var computedStyles = getComputedStyle( element );
|
||||||
|
|
|
@ -48,29 +48,31 @@
|
||||||
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
|
<p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-auto-animate>
|
<section>
|
||||||
<h3>Swapping list items</h3>
|
<section data-auto-animate>
|
||||||
<ul>
|
<h3>Swapping list items</h3>
|
||||||
<li>One</li>
|
<ul>
|
||||||
<li>Two</li>
|
<li>One</li>
|
||||||
<li>Three</li>
|
<li>Two</li>
|
||||||
</ul>
|
<li>Three</li>
|
||||||
</section>
|
</ul>
|
||||||
<section data-auto-animate>
|
</section>
|
||||||
<h3>Swapping list items</h3>
|
<section data-auto-animate>
|
||||||
<ul>
|
<h3>Swapping list items</h3>
|
||||||
<li>Two</li>
|
<ul>
|
||||||
<li>One</li>
|
<li>Two</li>
|
||||||
<li>Three</li>
|
<li>One</li>
|
||||||
</ul>
|
<li>Three</li>
|
||||||
</section>
|
</ul>
|
||||||
<section data-auto-animate>
|
</section>
|
||||||
<h3>Swapping list items</h3>
|
<section data-auto-animate>
|
||||||
<ul>
|
<h3>Swapping list items</h3>
|
||||||
<li>Two</li>
|
<ul>
|
||||||
<li>Three</li>
|
<li>Two</li>
|
||||||
<li>One</li>
|
<li>Three</li>
|
||||||
</ul>
|
<li>One</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section data-auto-animate style="height: 600px">
|
<section data-auto-animate style="height: 600px">
|
||||||
|
|
Loading…
Reference in New Issue