diff options
author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-05-20 19:14:45 +0200 |
---|---|---|
committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-05-20 19:14:45 +0200 |
commit | 35db006c02779667b718342acba4bfa2d1a2fd9a (patch) | |
tree | 93b53292fabfbd3489133bfc50cb9c87bea2f1b3 /js | |
parent | cd5161ffe93bef497f4970b9b717d4a88003ca66 (diff) | |
download | fosdem-2021-minimalism-presentation-35db006c02779667b718342acba4bfa2d1a2fd9a.tar fosdem-2021-minimalism-presentation-35db006c02779667b718342acba4bfa2d1a2fd9a.tar.gz |
fix overlapping ids when auto-animating multiple presentations in same window
Diffstat (limited to 'js')
-rw-r--r-- | js/controllers/autoanimate.js | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/js/controllers/autoanimate.js b/js/controllers/autoanimate.js index 5395729..ee4928c 100644 --- a/js/controllers/autoanimate.js +++ b/js/controllers/autoanimate.js @@ -1,6 +1,9 @@ import { queryAll, extend, createStyleSheet } from '../utils/util.js' import { FRAGMENT_STYLE_REGEX } from '../utils/constants.js' +// Counter used to generate unique IDs for auto-animated elements +let autoAnimateCounter = 0; + /** * Automatically animates matching elements across * slides with the [data-auto-animate] attribute. @@ -11,9 +14,6 @@ export default class AutoAnimate { this.Reveal = Reveal; - // Counter used to generate unique IDs for auto-animated elements - this.autoAnimateCounter = 0; - } /** @@ -45,7 +45,7 @@ export default class AutoAnimate { // Inject our auto-animate styles for this transition let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => { - return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, this.autoAnimateCounter++ ); + return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ ); } ); // Animate unmatched elements, if enabled @@ -63,7 +63,7 @@ export default class AutoAnimate { // 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++; + id = 'unmatched-' + autoAnimateCounter++; css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` ); } |