TootActionGroup: add hidden animation

package.json

@@ -68,6 +68,7 @@
     "solid-devtools": "^0.30.1",
     "solid-js": "^1.9.3",
     "solid-styled": "^0.11.1",
+    "solid-transition-group": "^0.2.3",
     "stacktrace-js": "^2.0.2",
     "workbox-core": "^7.3.0",
     "workbox-precaching": "^7.3.0"

src/timelines/RegularToot.tsx

@@ -24,6 +24,8 @@ import TootActionGroup from "./toots/TootActionGroup.js";
 import TootAuthorGroup from "./toots/TootAuthorGroup.js";
 import "./RegularToot.css";
 import { vibrate } from "~platform/hardware.js";
+import { Transition } from "solid-transition-group";
+import { ANIM_CURVE_SHARP, ANIM_CURVE_STD } from "~material/theme.js";
 
 export type TootEnv = {
   boost: (value: mastodon.v1.Status) => void;
@@ -97,7 +99,7 @@ export function createDefaultTootEnv(
 
       const result = reblogged
         ? await c.v1.statuses.$select(status.id).unreblog()
-        : (await c.v1.statuses.$select(status.id).reblog());
+        : await c.v1.statuses.$select(status.id).reblog();
 
       if (status.reblog && !reblogged) {
         // When calling /reblog, the result is the boost object (the actor
@@ -300,13 +302,22 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
         <Show when={toot().poll}>
           <TootPoll value={toot().poll!} status={toot()} />
         </Show>
-        <Show when={props.actionable}>
+        {props.actionable && (
           <Divider
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
+        )}
+        <Transition
+          onExit={(el, done) => {
+            (el as HTMLElement).addEventListener("animationend", done)
+            el.classList.add("Transition-exit")
+          }}
+        >
+          <Show when={props.actionable}>
             <TootActionGroup value={status()} class={cardStyle.cardGutSkip} />
           </Show>
+        </Transition>
       </article>
     </>
   );

src/timelines/toots/TootActionGroup.css

@@ -2,7 +2,7 @@
   padding-block: calc((var(--card-gut) - 10px) / 2);
   contain: layout style;
 
-  animation: 125ms var(--tutu-anim-curve-std) TootActionGroup_fade-in;
+  animation: 125ms var(--tutu-anim-curve-sharp) TootActionGroup_fade-in;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
@@ -28,16 +28,19 @@
   >.plain {
     justify-content: center;
   }
+
+  &.Transition-exit {
+    animation: 125ms var(--tutu-anim-curve-sharp) TootActionGroup_fade-out;
+  }
 }
 
 @keyframes TootActionGroup_fade-in {
   0% {
     opacity: 0.5;
     transform: translateY(-10px);
-    margin-bottom: -20px;
+    margin-bottom: -30px;
   }
 
-
   25% {
     margin-bottom: 0;
   }
@@ -47,3 +50,21 @@
     transform: translateY(0);
   }
 }
+
+@keyframes TootActionGroup_fade-out {
+  0% {
+    opacity: 1;
+    transform: translateY(0px);
+    margin-bottom: 0px;
+  }
+
+  75% {
+    margin-bottom: -30px;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+    margin-bottom: -30px;
+  }
+}