瀏覽代碼

fix issue where auto-animate did not work when jumping three or more slides (i.e. longer than the view distance)

hakimel 3 年之前
父節點
當前提交
eada286ca0
共有 6 個文件被更改,包括 39 次插入0 次删除
  1. 0 0
      dist/reveal.esm.js
  2. 0 0
      dist/reveal.esm.js.map
  3. 0 0
      dist/reveal.js
  4. 0 0
      dist/reveal.js.map
  5. 31 0
      examples/auto-animate.html
  6. 8 0
      js/controllers/autoanimate.js

File diff suppressed because it is too large
+ 0 - 0
dist/reveal.esm.js


File diff suppressed because it is too large
+ 0 - 0
dist/reveal.esm.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/reveal.js


File diff suppressed because it is too large
+ 0 - 0
dist/reveal.js.map


+ 31 - 0
examples/auto-animate.html

@@ -176,6 +176,37 @@
 					<h3>B2</h3>
 				</section>
 
+				<section>
+					<section id="stacked-slide-1" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 0px;">A</div>
+					</section>
+					<section id="stacked-slide-2" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 25%;">A</div>
+					</section>
+					<section id="stacked-slide-3" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 50%;">A</div>
+					</section>
+					<section id="stacked-slide-4" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 75%;">A</div>
+					</section>
+				</section>
+
 			</div>
 
 		</div>

+ 8 - 0
js/controllers/autoanimate.js

@@ -50,11 +50,19 @@ export default class AutoAnimate {
 			// Flag the navigation direction, needed for fragment buildup
 			animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';
 
+			// If the from-slide is hidden because it has moved outside
+			// the view distance, we need to temporarily show it while
+			// measuring
+			let fromSlideIsHidden = fromSlide.style.display === 'none';
+			if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;
+
 			// 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, autoAnimateCounter++ );
 			} );
 
+			if( fromSlideIsHidden ) fromSlide.style.display = 'none';
+
 			// Animate unmatched elements, if enabled
 			if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {
 

Some files were not shown because too many files changed in this diff