phlaym/dragonpolls
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved banner hiding animation

Browse Source
This commit is contained in:
aymm
2021-04-02 10:11:10 +02:00
parent a064eae86b
commit 4bf3a3f552
4 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
scripts/poll.js
View File

@ -40,16 +40,28 @@ function updateVotesRemaining() {
}
function hideBanner() {
const banner = document.querySelector('.success-banner');
//const banner = document.querySelector('.success-banner');
const banner = document.querySelector('.banner-wrapper');
const animationEnd = findTransitionEnd();
banner.addEventListener(animationEnd, animationEnded);
const rect = banner.getBoundingClientRect();
console.log('Setting height to ', `${rect.height}px`);
banner.style.height = `${rect.height}px`;
banner.classList.add('hiding');
}
function animationEnded(event) {
event.target.removeEventListener(findTransitionEnd(), animationEnded);
event.target.classList.add('hidden');
event.target.classList.remove('hiding');
const banner = event.target;
const isPhase1End = !banner.classList.contains('resizing');
banner.innerText = '';
if (isPhase1End) {
console.log('Resizing');
banner.classList.add('resizing');
banner.style.height = '0';
} else {
event.target.removeEventListener(findTransitionEnd(), animationEnded);
event.target.classList.add('hidden');
}
}
function findTransitionEnd() {