diff --git a/bun.lockb b/bun.lockb index 69cacb8..d4f1262 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 2bde455..060dc8b 100644 --- a/package.json +++ b/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" diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 85048da..52f0243 100644 --- a/src/timelines/RegularToot.tsx +++ b/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 = (oprops) => { - + {props.actionable && ( - - + )} + { + (el as HTMLElement).addEventListener("animationend", done) + el.classList.add("Transition-exit") + }} + > + + + + ); diff --git a/src/timelines/toots/TootActionGroup.css b/src/timelines/toots/TootActionGroup.css index 11653e6..c955226 100644 --- a/src/timelines/toots/TootActionGroup.css +++ b/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; } @@ -46,4 +49,22 @@ opacity: 1; 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; + } } \ No newline at end of file