80 lines
1.6 KiB
CSS
80 lines
1.6 KiB
CSS
/* 配方取自 react-view-transitions 技能。时长变量见 tokens.css。 */
|
|
@keyframes fade {
|
|
from {
|
|
filter: blur(3px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
filter: blur(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slide {
|
|
from {
|
|
translate: var(--slide-offset);
|
|
}
|
|
|
|
to {
|
|
translate: 0;
|
|
}
|
|
}
|
|
|
|
::view-transition-old(.fade-out) {
|
|
animation: var(--duration-exit) ease-in fade reverse;
|
|
}
|
|
|
|
::view-transition-new(.fade-in) {
|
|
animation: var(--duration-enter) ease-out var(--duration-exit) both fade;
|
|
}
|
|
|
|
::view-transition-old(.nav-forward) {
|
|
--slide-offset: -60px;
|
|
|
|
animation:
|
|
var(--duration-exit) ease-in both fade reverse,
|
|
var(--duration-move) ease-in-out both slide reverse;
|
|
}
|
|
|
|
::view-transition-new(.nav-forward) {
|
|
--slide-offset: 60px;
|
|
|
|
animation:
|
|
var(--duration-enter) ease-out var(--duration-exit) both fade,
|
|
var(--duration-move) ease-in-out both slide;
|
|
}
|
|
|
|
::view-transition-old(.nav-back) {
|
|
--slide-offset: 60px;
|
|
|
|
animation:
|
|
var(--duration-exit) ease-in both fade reverse,
|
|
var(--duration-move) ease-in-out both slide reverse;
|
|
}
|
|
|
|
::view-transition-new(.nav-back) {
|
|
--slide-offset: -60px;
|
|
|
|
animation:
|
|
var(--duration-enter) ease-out var(--duration-exit) both fade,
|
|
var(--duration-move) ease-in-out both slide;
|
|
}
|
|
|
|
/* 顶栏、底栏使用 backdrop-filter,需隐藏旧快照以免闪烁 */
|
|
::view-transition-group(bar-top),
|
|
::view-transition-group(bar-bottom) {
|
|
animation: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
::view-transition-old(bar-top),
|
|
::view-transition-old(bar-bottom) {
|
|
display: none;
|
|
}
|
|
|
|
::view-transition-new(bar-top),
|
|
::view-transition-new(bar-bottom) {
|
|
animation: none;
|
|
}
|