Improved banner hiding animation
This commit is contained in:
parent
a064eae86b
commit
4bf3a3f552
2
composer.lock
generated
2
composer.lock
generated
@ -12,7 +12,7 @@
|
||||
"dist": {
|
||||
"type": "path",
|
||||
"url": "../APnutI",
|
||||
"reference": "c2434cfedcd88d729408ebfffc868d064260cbf1"
|
||||
"reference": "a0b03d439f9e8fba3e3f37a8a194a3ccabcff183"
|
||||
},
|
||||
"require": {
|
||||
"ext-curl": "*",
|
||||
|
@ -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) {
|
||||
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');
|
||||
event.target.classList.remove('hiding');
|
||||
}
|
||||
}
|
||||
|
||||
function findTransitionEnd() {
|
||||
|
@ -6,6 +6,7 @@
|
||||
--main-accent-color: rgb(253, 122, 0);
|
||||
--disabled-color: gray;
|
||||
--green: green;
|
||||
--default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
|
||||
}
|
||||
@supports (color: color(display-p3 1 1 1)) {
|
||||
:root {
|
||||
@ -60,6 +61,7 @@ header {
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: var(--secondary-bg-color);
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
@ -96,6 +98,7 @@ header {
|
||||
|
||||
.poll .user .avatar {
|
||||
margin-right: 8px;
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.datewrapper {
|
||||
@ -124,18 +127,28 @@ datewrapper time {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.banner-wrapper {
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Success banner */
|
||||
.success-banner {
|
||||
background-color: var(--green);
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease-in;
|
||||
box-shadow: var(--default-shadow);
|
||||
}
|
||||
|
||||
.success-banner.hiding {
|
||||
transform: translateX(-150%);
|
||||
.banner-wrapper.hiding {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
.banner-wrapper.resizing {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
box-shadow: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.success-banner span {
|
||||
|
@ -52,7 +52,7 @@ $data_can_vote = $poll->canVote() ? 'true' : 'false';
|
||||
$disabled_button = ($poll->canVote() && count($user_votes) > 0) ? '' : 'disabled';
|
||||
|
||||
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>
|
||||
<?php } ?>
|
||||
|
Loading…
Reference in New Issue
Block a user