fix issue that caused data-auto-animate to be added to the wrong slides

This commit is contained in:
Hakim El Hattab 2020-02-16 19:14:46 +01:00
parent d2796f56b8
commit c38bc2c611
2 changed files with 15 additions and 9 deletions

View File

@ -3067,12 +3067,12 @@
setTimeout( function() { setTimeout( function() {
dom.slides.classList.remove( 'disable-slide-transitions' ); dom.slides.classList.remove( 'disable-slide-transitions' );
}, 0 ); }, 0 );
}
if( config.autoAnimate ) { if( config.autoAnimate ) {
// Run the auto-animation between our slides // Run the auto-animation between our slides
autoAnimate( previousSlide, currentSlide ); autoAnimate( previousSlide, currentSlide );
} }
}
} }
@ -3876,9 +3876,11 @@
} ); } );
// Set our starting state // Set our starting state. Note that we may be coming from, or
fromSlide.dataset.autoAnimate = 'pending'; // going to, a non-auto-animate slide so we only want to assign
toSlide.dataset.autoAnimate = 'pending'; // this value is the attribute exists.
if( typeof fromSlide.dataset.autoAnimate === 'string' ) fromSlide.dataset.autoAnimate = 'pending';
if( typeof toSlide.dataset.autoAnimate === 'string' ) toSlide.dataset.autoAnimate = 'pending';
// Inject our auto-animate styles for this transition // Inject our auto-animate styles for this transition
var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) { var css = getAutoAnimatableElements( fromSlide, toSlide ).map( function( elements ) {
@ -3902,7 +3904,7 @@
// Start the animation next cycle // Start the animation next cycle
setTimeout( function() { setTimeout( function() {
toSlide.dataset.autoAnimate = 'running'; if( typeof toSlide.dataset.autoAnimate === 'string' ) toSlide.dataset.autoAnimate = 'running';
}, 2 ); }, 2 );
} }

View File

@ -37,6 +37,10 @@
<h3>h3</h2> <h3>h3</h2>
</section> </section>
<section>
<h1>Non-auto-animate slide</h1>
</section>
</div> </div>
</div> </div>
@ -46,7 +50,7 @@
<script> <script>
const slides = [].slice.call( document.querySelectorAll( '.slides section' ) ).map( slide => { const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
return { return {
h1: slide.querySelector( 'h1' ), h1: slide.querySelector( 'h1' ),
h2: slide.querySelector( 'h2' ), h2: slide.querySelector( 'h2' ),