Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

Toot: fix expansion animation on WebKit (fix #29)

Browse source
This commit is contained in:
thislight 2024-10-22 23:24:31 +08:00
parent 3ca43b4282
commit 4da3263e17
2 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/devnotes.md
View file

@ -41,3 +41,9 @@ export function updateAcctInf(idx: number) {
``` ```
Ja, the code is weird, but that's the best we know. Anyway, you need new object on the path of your changed value. Ja, the code is weird, but that's the best we know. Anyway, you need new object on the path of your changed value.
## `transition: *-block or *-inline` does not work on WebKit
Idk why, but transition on logical directions may not work on WebKit - sometimes they work.
Use physical directions to avoid trouble, like "margin-top, margin-bottom".

3
src/timelines/toot.module.css
View file

@ -8,7 +8,8 @@
&.toot { &.toot {
/* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */ /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
transition: transition:
margin-block 125ms var(--tutu-anim-curve-std), margin-top 125ms var(--tutu-anim-curve-std),
margin-bottom 125ms var(--tutu-anim-curve-std),
height 225ms var(--tutu-anim-curve-std), height 225ms var(--tutu-anim-curve-std),
var(--tutu-transition-shadow); var(--tutu-transition-shadow);
border-radius: 0; border-radius: 0;