temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g214): 浮层入场动效收敛为统一 keyframes

Browse Source
This commit is contained in:
HIsheR
2026-10-26 19:54:47 +08:00
parent 1dca26901b
commit a607a40d19
3 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/ui.css
+33 -35
View File
@@ -1956,6 +1956,15 @@ button.ua-step-dot:hover {
opacity: 0;
}
}
/* 浮层入场：自上而下 4px 淡入（触发在下方、弹层向下展开）；翻转态改用 ua-pop-rise 反向 */
@keyframes ua-pop-drop {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@keyframes ua-pop-rise {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@keyframes ua-pop-in {
from {
opacity: 0;
@@ -3188,7 +3197,7 @@ button.ua-step-dot:hover {
}
.ua-cascader-pop.ua-open {
display: block;
animation: ua-cascader-in var(--ua-duration-fast) ease both;
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
.ua-cascader-pop.is-flip {
margin-top: 0;
@@ -3248,10 +3257,6 @@ button.ua-step-dot:hover {
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-xs);
}
@keyframes ua-cascader-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ua-cascader-pop.ua-open { animation: none; }
.ua-cascader-trigger,
@@ -3348,7 +3353,7 @@ button.ua-step-dot:hover {
}
.ua-autocomplete-pop.ua-open {
display: block;
animation: ua-ac-in var(--ua-duration-fast) ease both;
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
.ua-autocomplete-pop.is-flip {
margin-top: 0;
@@ -3387,10 +3392,6 @@ button.ua-step-dot:hover {
font-size: var(--ua-font-size-sm);
color: var(--ua-color-text-muted);
}
@keyframes ua-ac-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ua-autocomplete-pop.ua-open { animation: none; }
.ua-autocomplete-input,
@@ -3449,7 +3450,7 @@ button.ua-step-dot:hover {
}
.ua-datepicker-pop.ua-open {
display: block;
animation: ua-dp-in var(--ua-duration-fast) ease both;
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
.ua-datepicker-pop.is-flip {
margin-top: 0;
@@ -3564,10 +3565,6 @@ button.ua-step-dot:hover {
border-color: var(--ua-color-accent);
background: var(--ua-color-tint-accent-weak);
}
@keyframes ua-dp-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ua-datepicker-pop.ua-open { animation: none; }
.ua-datepicker-trigger,
@@ -3693,7 +3690,7 @@ button.ua-step-dot:hover {
}
.ua-colorpicker-pop.ua-open {
display: block;
animation: ua-cp-in var(--ua-duration-fast) ease both;
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
.ua-colorpicker-pop.is-flip {
margin-top: 0;
@@ -3747,10 +3744,6 @@ button.ua-step-dot:hover {
.ua-colorpicker-hex:focus {
border-color: var(--ua-color-accent);
}
@keyframes ua-cp-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ua-colorpicker-pop.ua-open { animation: none; }
.ua-colorpicker-trigger,
@@ -3962,7 +3955,7 @@ button.ua-step-dot:hover {
}
.ua-multiselect-pop.ua-open {
display: block;
animation: ua-ms-in var(--ua-duration-fast) ease both;
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
.ua-multiselect-pop.is-flip {
margin-top: 0;
@@ -4017,10 +4010,6 @@ button.ua-step-dot:hover {
font-size: var(--ua-font-size-sm);
color: var(--ua-color-text-muted);
}
@keyframes ua-ms-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ua-multiselect-pop.ua-open { animation: none; }
.ua-multiselect-box,
@@ -4565,7 +4554,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
}
.ua-mentions.is-open .ua-mentions-pop {
display: block;
animation: ua-mentions-in var(--ua-duration-fast) var(--ua-ease);
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
.ua-mentions-item {
display: flex;
@@ -4586,10 +4575,6 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
color: var(--ua-color-text-muted);
font-size: var(--ua-font-size-sm);
}
@keyframes ua-mentions-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ua-mentions.is-open .ua-mentions-pop {
animation: none;
@@ -4664,11 +4649,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
}
.ua-treeselect.is-open .ua-treeselect-pop {
display: block;
animation: ua-treeselect-in var(--ua-duration-fast) var(--ua-ease);
}
@keyframes ua-treeselect-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
animation: ua-pop-drop var(--ua-duration-fast) var(--ua-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
.ua-treeselect.is-open .ua-treeselect-pop {
@@ -5146,3 +5127,20 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
transform: none;
}
}
/* ---- 浮层入场方向：翻转态的动画名覆盖（放在末尾，靠特异性 ua-open + is-flip 生效） ---- */
.ua-cascader-pop.ua-open.is-flip {
animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
}
.ua-autocomplete-pop.ua-open.is-flip {
animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
}
.ua-datepicker-pop.ua-open.is-flip {
animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
}
.ua-colorpicker-pop.ua-open.is-flip {
animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
}
.ua-multiselect-pop.ua-open.is-flip {
animation-name: ua-pop-rise; /* 翻到上方：入场方向随位置镜像 */
}