mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Added animation transition for breadcrumb dropdown load
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:
parent
89dfa43e73
commit
35a47a273b
@ -1,4 +1,5 @@
|
|||||||
import {debounce} from "../services/util";
|
import {debounce} from "../services/util";
|
||||||
|
import {transitionHeight} from "../services/animations";
|
||||||
|
|
||||||
class DropdownSearch {
|
class DropdownSearch {
|
||||||
|
|
||||||
@ -51,7 +52,9 @@ class DropdownSearch {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const resp = await window.$http.get(this.getAjaxUrl(searchTerm));
|
const resp = await window.$http.get(this.getAjaxUrl(searchTerm));
|
||||||
|
const animate = transitionHeight(this.listContainerElem, 80);
|
||||||
this.listContainerElem.innerHTML = resp.data;
|
this.listContainerElem.innerHTML = resp.data;
|
||||||
|
animate();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
}
|
}
|
||||||
|
@ -82,6 +82,38 @@ export function slideDown(element, animTime = 400) {
|
|||||||
animateStyles(element, animStyles, animTime);
|
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.
|
* 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
|
* Styles must be an object where the keys are style properties, camelcase, and the values
|
||||||
|
Loading…
Reference in New Issue
Block a user