+import {slideUp, slideDown} from "../services/animations";
class ExpandToggle {
}
open(elemToToggle) {
- elemToToggle.style.display = 'block';
- elemToToggle.style.height = '';
- let height = elemToToggle.getBoundingClientRect().height;
- elemToToggle.style.height = '0px';
- elemToToggle.style.overflow = 'hidden';
- elemToToggle.style.transition = 'height ease-in-out 240ms';
-
- let transitionEndBound = onTransitionEnd.bind(this);
- function onTransitionEnd() {
- elemToToggle.style.overflow = '';
- elemToToggle.style.height = '';
- elemToToggle.style.transition = '';
- elemToToggle.removeEventListener('transitionend', transitionEndBound);
- }
-
- setTimeout(() => {
- elemToToggle.style.height = `${height}px`;
- elemToToggle.addEventListener('transitionend', transitionEndBound)
- }, 1);
+ slideDown(elemToToggle, 200);
}
close(elemToToggle) {
- elemToToggle.style.display = 'block';
- elemToToggle.style.height = elemToToggle.getBoundingClientRect().height + 'px';
- elemToToggle.style.overflow = 'hidden';
- elemToToggle.style.transition = 'all ease-in-out 240ms';
-
- let transitionEndBound = onTransitionEnd.bind(this);
- function onTransitionEnd() {
- elemToToggle.style.overflow = '';
- elemToToggle.style.height = '';
- elemToToggle.style.transition = '';
- elemToToggle.style.display = 'none';
- elemToToggle.removeEventListener('transitionend', transitionEndBound);
- }
-
- setTimeout(() => {
- elemToToggle.style.height = `0px`;
- elemToToggle.addEventListener('transitionend', transitionEndBound)
- }, 1);
+ slideUp(elemToToggle, 200);
}
click(event) {