Improved banner hiding animation

This commit is contained in:
aymm 2021-04-02 10:11:10 +02:00
parent a064eae86b
commit 4bf3a3f552
Signed by: phlaym
GPG Key ID: A06651BAB6777237
4 changed files with 35 additions and 10 deletions

2
composer.lock generated
View File

@ -12,7 +12,7 @@
"dist": { "dist": {
"type": "path", "type": "path",
"url": "../APnutI", "url": "../APnutI",
"reference": "c2434cfedcd88d729408ebfffc868d064260cbf1" "reference": "a0b03d439f9e8fba3e3f37a8a194a3ccabcff183"
}, },
"require": { "require": {
"ext-curl": "*", "ext-curl": "*",

View File

@ -40,16 +40,28 @@ function updateVotesRemaining() {
} }
function hideBanner() { function hideBanner() {
const banner = document.querySelector('.success-banner'); //const banner = document.querySelector('.success-banner');
const banner = document.querySelector('.banner-wrapper');
const animationEnd = findTransitionEnd(); const animationEnd = findTransitionEnd();
banner.addEventListener(animationEnd, animationEnded); 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'); banner.classList.add('hiding');
} }
function animationEnded(event) { function animationEnded(event) {
event.target.removeEventListener(findTransitionEnd(), animationEnded); const banner = event.target;
event.target.classList.add('hidden'); const isPhase1End = !banner.classList.contains('resizing');
event.target.classList.remove('hiding'); 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() { function findTransitionEnd() {

View File

@ -6,6 +6,7 @@
--main-accent-color: rgb(253, 122, 0); --main-accent-color: rgb(253, 122, 0);
--disabled-color: gray; --disabled-color: gray;
--green: green; --green: green;
--default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
} }
@supports (color: color(display-p3 1 1 1)) { @supports (color: color(display-p3 1 1 1)) {
:root { :root {
@ -60,6 +61,7 @@ header {
padding: 8px; padding: 8px;
margin-bottom: 8px; margin-bottom: 8px;
background: var(--secondary-bg-color); background: var(--secondary-bg-color);
box-shadow: var(--default-shadow);
} }
.spacer { .spacer {
@ -96,6 +98,7 @@ header {
.poll .user .avatar { .poll .user .avatar {
margin-right: 8px; margin-right: 8px;
box-shadow: var(--default-shadow);
} }
.datewrapper { .datewrapper {
@ -124,18 +127,28 @@ datewrapper time {
font-size: small; font-size: small;
} }
.banner-wrapper {
cursor: pointer;
transition: all 0.25s ease-in-out;
box-sizing: border-box;
}
/* Success banner */ /* Success banner */
.success-banner { .success-banner {
background-color: var(--green); background-color: var(--green);
padding: 8px; padding: 8px;
display: inline-block; display: inline-block;
margin-bottom: 8px; margin-bottom: 8px;
cursor: pointer; box-shadow: var(--default-shadow);
transition: all 0.5s ease-in;
} }
.success-banner.hiding { .banner-wrapper.hiding {
transform: translateX(-150%); transform: translateX(-200%);
}
.banner-wrapper.resizing {
height: 0px;
width: 0px;
box-shadow: 0px;
padding: 0px;
} }
.success-banner span { .success-banner span {

View File

@ -52,7 +52,7 @@ $data_can_vote = $poll->canVote() ? 'true' : 'false';
$disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled'; $disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled';
if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?> if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
<div> <div class="banner-wrapper">
<div class="success-banner"><span></span> Your vote has been saved, thank you!</div> <div class="success-banner"><span></span> Your vote has been saved, thank you!</div>
</div> </div>
<?php } ?> <?php } ?>