diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2025-05-21 14:19:34 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-05-21 14:19:34 +0900 |
| commit | 2619f69238034dbd80942a26550ef25b903bc1dc (patch) | |
| tree | d4e107ecd0acac194aeb6fa54072e746a54a6674 /packages/frontend/src/style.scss | |
| parent | enhance(frontend/aiscript): AiScriptからtoastを発行できるように (#... (diff) | |
| download | misskey-2619f69238034dbd80942a26550ef25b903bc1dc.tar.gz misskey-2619f69238034dbd80942a26550ef25b903bc1dc.tar.bz2 misskey-2619f69238034dbd80942a26550ef25b903bc1dc.zip | |
enhance(frontend): テーマ切り替えのアニメーションをView Transitionに変更 (#15974)
* enhance(frontend): テーマ切り替えのアニメーションをView Transitionに変更
* fix lint
* fix: 切り替え時間を0.5sに
Diffstat (limited to 'packages/frontend/src/style.scss')
| -rw-r--r-- | packages/frontend/src/style.scss | 41 |
1 files changed, 39 insertions, 2 deletions
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index 30936fbb10..12879e63b3 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -90,12 +90,49 @@ html { } } -html._themeChanging_ { +html._themeChangingFallback_ { &, * { - transition: background 1s ease, border 1s ease !important; + transition: background 0.5s ease, border 0.5s ease !important; } } +html._themeChanging_ { + view-transition-name: theme-changing; +} + +html::view-transition-new(theme-changing) { + z-index: 4000001; + animation: themeChangingNew 0.5s ease; + animation-fill-mode: forwards; +} + +html::view-transition-old(theme-changing) { + z-index: 4000000; + animation: themeChangingOld 0.5s ease; + animation-fill-mode: forwards; +} + +@keyframes themeChangingNew { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes themeChangingOld { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } + +} + html, body, #misskey_app { |