Improved banner hiding animation

composer.lock

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

scripts/poll.js

@@ -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);
+  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() {

styles/style.css

@@ -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;
+  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 {

view_poll.php

@@ -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 } ?>