xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

unmatched auto-aniamte elements now adhere to element-level duration/delay attributes

Browse Source
This commit is contained in:
Hakim El Hattab 2020-03-17 19:38:26 +01:00
parent cf9eb6e103
commit 376b8230bb
4 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/reveal.scss
View File

@ -1283,11 +1283,11 @@ $controlsArrowAngleActive: 36deg;
* AUTO ANIMATE * AUTO ANIMATE
*********************************************/ *********************************************/
.reveal [data-auto-animate-target="unmatched"] { .reveal [data-auto-animate-target^="unmatched"] {
will-change: opacity; will-change: opacity;
} }
.reveal section[data-auto-animate]:not(.stack):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; opacity: 0;
} }

4
dist/reveal.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

27
js/controllers/autoanimate.js
View File

@ -45,11 +45,30 @@ export default class AutoAnimate {
// Animate unmatched elements, if enabled // Animate unmatched elements, if enabled
if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) { if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {
this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {
unmatchedElement.dataset.autoAnimateTarget = 'unmatched';
} );
css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${animationOptions.duration*0.8}s ease ${animationOptions.duration*0.2}s; }` ); // Our default timings for unmatched elements
let defaultUnmatchedDuration = animationOptions.duration * 0.8,
defaultUnmatchedDelay = animationOptions.duration * 0.2;
this.getUnmatchedAutoAnimateElements( toSlide ).forEach( unmatchedElement => {
let unmatchedOptions = this.getAutoAnimateOptions( unmatchedElement, animationOptions );
let id = 'unmatched';
// If there is a duration or delay set specifically for this
// element our unmatched elements should adhere to those
if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {
id = 'unmatched-' + this.autoAnimateCounter++;
css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
}
unmatchedElement.dataset.autoAnimateTarget = id;
}, this );
// Our default transition for unmatched elements
css.push( `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }` );
} }
// Setting the whole chunk of CSS at once is the most // Setting the whole chunk of CSS at once is the most