Forráskód Böngészése

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

Hakim El Hattab 5 éve
szülő
commit
376b8230bb
4 módosított fájl, 26 hozzáadás és 7 törlés
  1. 2 2
      css/reveal.scss
  2. 1 1
      dist/reveal.css
  3. 1 1
      dist/reveal.min.js
  4. 22 3
      js/controllers/autoanimate.js

+ 2 - 2
css/reveal.scss

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

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 1 - 1
dist/reveal.css


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 1 - 1
dist/reveal.min.js


+ 22 - 3
js/controllers/autoanimate.js

@@ -45,11 +45,30 @@ export default class AutoAnimate {
 
 			// Animate unmatched elements, if enabled
 			if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {
+
+				// Our default timings for unmatched elements
+				let defaultUnmatchedDuration = animationOptions.duration * 0.8,
+					defaultUnmatchedDelay = animationOptions.duration * 0.2;
+
 				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; }` );
+					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

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott