xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

auto-animate; carry forward fragment visibility, unmatched elements adhere to duration/delay attributes

Browse Source
This commit is contained in:
Hakim El Hattab
2020-03-19 15:18:14 +01:00
parent 376b8230bb
commit 4d1cb43faf
6 changed files with 67 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/controllers/autoanimate.js
View File

@ -38,9 +38,13 @@ export default class AutoAnimate {
fromSlide.dataset.autoAnimate = 'pending';
toSlide.dataset.autoAnimate = 'pending';
// Flag the navigation direction, needed for fragment buildup
let allSlides = this.Reveal.getSlides();
animationOptions.slideDirection = allSlides.indexOf( toSlide ) > allSlides.indexOf( fromSlide ) ? 'forward' : 'backward';
// Inject our auto-animate styles for this transition
let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
return this.getAutoAnimateCSS( elements.from, elements.to, elements.options || {}, animationOptions, this.autoAnimateCounter++ );
return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, this.autoAnimateCounter++ );
} );
// Animate unmatched elements, if enabled
@ -124,8 +128,9 @@ export default class AutoAnimate {
}
/**
* Auto-animates the properties of an element from their original
* values to their new state.
* Creates a FLIP animation where the `to` element starts out
* in the `from` element position and animates to its original
* state.
*
* @param {HTMLElement} from
* @param {HTMLElement} to
@ -134,7 +139,7 @@ export default class AutoAnimate {
* @param {String} id Unique ID that we can use to identify this
* auto-animate element in the DOM
*/
getAutoAnimateCSS( from, to, elementOptions, animationOptions, id ) {
autoAnimateElements( from, to, elementOptions, animationOptions, id ) {
// 'from' elements are given a data-auto-animate-target with no value,
// 'to' elements are are given a data-auto-animate-target with an ID
@ -154,6 +159,21 @@ export default class AutoAnimate {
let fromProps = this.getAutoAnimatableProperties( 'from', from, elementOptions ),
toProps = this.getAutoAnimatableProperties( 'to', to, elementOptions );
// Maintain fragment visibility for matching elements when
// we're navigating forwards, this way the viewer won't need
// to step through the same fragments twice
if( to.classList.contains( 'fragment' ) ) {
// Don't auto-animate the opacity of fragments to avoid
// conflicts with fragment animations
delete toProps.styles['opacity'];
if( from.classList.contains( 'fragment' ) && animationOptions.slideDirection === 'forward' ) {
to.classList.add( 'visible', 'disabled' );
}
}
// If translation and/or scaling are enabled, css transform
// the 'to' element so that it matches the position and size
// of the 'from' element

8
js/controllers/fragments.js
View File

@ -63,8 +63,8 @@ export default class Fragments {
let currentSlide = this.Reveal.getCurrentSlide();
if( currentSlide && this.Reveal.getConfig().fragments ) {
let fragments = currentSlide.querySelectorAll( '.fragment' );
let hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.visible)' );
let fragments = currentSlide.querySelectorAll( '.fragment:not(.disabled)' );
let hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.disabled):not(.visible)' );
return {
prev: fragments.length - hiddenFragments.length > 0,
@ -291,12 +291,12 @@ export default class Fragments {
let currentSlide = this.Reveal.getCurrentSlide();
if( currentSlide && this.Reveal.getConfig().fragments ) {
let fragments = this.sort( currentSlide.querySelectorAll( '.fragment' ) );
let fragments = this.sort( currentSlide.querySelectorAll( '.fragment:not(.disabled)' ) );
if( fragments.length ) {
// If no index is specified, find the current
if( typeof index !== 'number' ) {
let lastVisibleFragment = this.sort( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop();
let lastVisibleFragment = this.sort( currentSlide.querySelectorAll( '.fragment:not(.disabled).visible' ) ).pop();
if( lastVisibleFragment ) {
index = parseInt( lastVisibleFragment.getAttribute( 'data-fragment-index' ) || 0, 10 );