Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-07 20:02:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added animation transition for breadcrumb dropdown load

Browse Source 
Animates the height on breadcrumb dropdown menus to transition to the
loaded animations quicker. Includes a new animation helper for doing
similar tasks in future.
This commit is contained in:
Dan Brown 2022-05-14 13:32:25 +01:00
parent 89dfa43e73
commit 35a47a273b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 35 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/components/dropdown-search.js
View File

@ -1,4 +1,5 @@
import {debounce} from "../services/util";
import {transitionHeight} from "../services/animations";
class DropdownSearch {
@ -51,7 +52,9 @@ class DropdownSearch {
try {
const resp = await window.$http.get(this.getAjaxUrl(searchTerm));
const animate = transitionHeight(this.listContainerElem, 80);
this.listContainerElem.innerHTML = resp.data;
animate();
} catch (err) {
console.error(err);
}

32
resources/js/services/animations.js
View File

@ -82,6 +82,38 @@ export function slideDown(element, animTime = 400) {
animateStyles(element, animStyles, animTime);
}
/**
* Transition the height of the given element between two states.
* Call with first state, and you'll receive a function in return.
* Call the returned function in the second state to animate between those two states.
* If animating to/from 0-height use the slide-up/slide down as easier alternatives.
* @param {Element} element - Element to animate
* @param {Number} animTime - Animation time in ms
* @returns {function} - Function to run in second state to trigger animation.
*/
export function transitionHeight(element, animTime = 400) {
const startHeight = element.getBoundingClientRect().height;
const initialComputedStyles = getComputedStyle(element);
const startPaddingTop = initialComputedStyles.getPropertyValue('padding-top');
const startPaddingBottom = initialComputedStyles.getPropertyValue('padding-bottom');
return () => {
cleanupExistingElementAnimation(element);
const targetHeight = element.getBoundingClientRect().height;
const computedStyles = getComputedStyle(element);
const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
const animStyles = {
height: [`${startHeight}px`, `${targetHeight}px`],
overflow: ['hidden', 'hidden'],
paddingTop: [startPaddingTop, targetPaddingTop],
paddingBottom: [startPaddingBottom, targetPaddingBottom],
};
animateStyles(element, animStyles, animTime);
};
}
/**
* Animate the css styles of an element using FLIP animation techniques.
* Styles must be an object where the keys are style properties, camelcase, and the values