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

This commit is contained in:
thislight 2024-10-22 23:24:31 +08:00
parent 1134372432
commit faf0700f0c
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 8 additions and 1 deletions

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".

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;