fix overlapping ids when auto-animating multiple presentations in same window
This commit is contained in:
parent
cd5161ffe9
commit
35db006c02
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,9 @@
|
||||||
import { queryAll, extend, createStyleSheet } from '../utils/util.js'
|
import { queryAll, extend, createStyleSheet } from '../utils/util.js'
|
||||||
import { FRAGMENT_STYLE_REGEX } from '../utils/constants.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
|
* Automatically animates matching elements across
|
||||||
* slides with the [data-auto-animate] attribute.
|
* slides with the [data-auto-animate] attribute.
|
||||||
|
@ -11,9 +14,6 @@ export default class AutoAnimate {
|
||||||
|
|
||||||
this.Reveal = Reveal;
|
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
|
// Inject our auto-animate styles for this transition
|
||||||
let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
|
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
|
// Animate unmatched elements, if enabled
|
||||||
|
@ -63,7 +63,7 @@ export default class AutoAnimate {
|
||||||
// If there is a duration or delay set specifically for this
|
// If there is a duration or delay set specifically for this
|
||||||
// element our unmatched elements should adhere to those
|
// element our unmatched elements should adhere to those
|
||||||
if( unmatchedOptions.duration !== animationOptions.duration || unmatchedOptions.delay !== animationOptions.delay ) {
|
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; }` );
|
css.push( `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }` );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue