Skip to content

[WIP]feat(theme): [transition] add global animation configuration scheme (LESS-based) #3632

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: ospp-2025/tiny-vue-animation
Choose a base branch
from
Open

[WIP]feat(theme): [transition] add global animation configuration scheme (LESS-based) #3632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7faece
feat(theme): [transition] add global animation configuration scheme (…
lyra-planet Jul 18, 2025
bb8ea19
fix(tag): fix the index.less
lyra-planet Aug 14, 2025
cac59e8
feat(theme): [motion] add global animation variables
lyra-planet Aug 31, 2025
7dd09a2
feat(theme): [motion] update the documentation and fix some bug
lyra-planet Sep 2, 2025
fa75118
feat(theme): [motion] rename the documentation and remove unnecessary…
lyra-planet Sep 2, 2025
5dca889
feat(theme): [motion] reset the css variables
lyra-planet Sep 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions packages/theme/src/base/reset.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,13 @@

@import '../custom.less';
@import './vars.less';
@import '../motion/index.less';

// .tiny-icon-loading 类名的动画效果。 它出现在多个组件中，故抽取到一起。
.@{css-prefix-iconfont}-loading {
--tv-motion-rotate-speed: 2s;
line-height: 1;
animation: rotating 2s linear infinite;
}

@keyframes rotating {
0% {
transform: rotateZ(0deg);
}

100% {
transform: rotateZ(360deg);
}
animation: rotate-z var(--tv-motion-rotate-speed) linear infinite;
}

// 高亮节点
Expand Down
26 changes: 1 addition & 25 deletions packages/theme/src/base/transition.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
vue2的动画状态类： v-enter v-enter-to v-leave v-leave-to 以及 v-enter-active, v-leave-active
vue3的动画状态类： v-enter-from v-enter-to v-leave-from v-leave-to 以及 v-enter-active, v-leave-active
*/
@import '../motion/index.less';

.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
Expand Down Expand Up @@ -243,28 +244,3 @@ vue3的动画状态类： v-enter-from v-enter-to v-leave-from v-leave-to 以
.tiny-transition-alert-fade-leave-active {
transition: opacity 0.3s ease-in;
}

// modal 的动画
@keyframes modal-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}

100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}

@keyframes modal-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}

100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
97 changes: 97 additions & 0 deletions packages/theme/src/base/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -522,4 +522,101 @@
--tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色
--tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #dbdbdb 滑块active背景色
--tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // #fff 轨道背景色

/** 10. 动画变量 **/
/* ---------- 蚂蚁线 (ants.less) ---------- */
--tv-motion-ants-shift: 8px; /* 单次偏移距离 */
--tv-motion-ants-speed: 0.8s; /* 动画时长 */

/* ---------- 箭头移动 (arrow.less) ---------- */
--tv-motion-arrow-offset: 16px; /* 箭头最终位移 */
--tv-motion-arrow-left-init: -17px; /* 左侧初始位置 */
--tv-motion-arrow-left-mid: -13px; /* 左侧 pulse 中间位置 */
--tv-motion-arrow-right-init: -17px; /* 右侧初始位置 */
--tv-motion-arrow-right-mid: -13px; /* 右侧 pulse 中间位置 */
--tv-motion-arrow-speed: 0.3s; /* 箭头动画时长 */

/* ---------- 缩放弹入 (bounce.less) ---------- */
--tv-motion-bounce-scale-min: 0; /* 初始缩小比例 */
--tv-motion-bounce-scale-mid: 1.2; /* 弹入/弹出中间比例 */
--tv-motion-bounce-scale-max: 1; /* 最终展开比例 */
--tv-motion-bounce-speed: 0.3s; /* 动画时长 */

/* ---------- 淡入淡出 (fade.less) ---------- */
--tv-motion-fade-offset-x: 20px; /* X轴位移 */
--tv-motion-fade-offset-y: 20px; /* Y轴位移 */
--tv-motion-fade-speed: 0.3s; /* 动画时长 */

/* ---------- 加载动画 (loading.less) ---------- */
/* 骨架屏 */
--tv-motion-skeleton-speed: 1.5s; /* 骨架屏动画时长 */
--tv-motion-skeleton-background-offset: -20%; /* 背景流动偏移 */
/* 网格加载 */
--tv-motion-grid-loading-speed: 1.5s; /* 网格加载动画时长 */
--tv-motion-grid-loading-opacity: 0.1; /* 网格加载最终透明度 */

/* ---------- 进度条背景 (progress.less) ---------- */
--tv-motion-progress-background-shift: 32px; /* 背景流动位移 */
--tv-motion-progress-speed: 1s; /* 动画时长 */

/* ---------- 通用旋转 (rotate.less) ---------- */
--tv-motion-rotate-speed: 1s; /* 旋转动画时长 */
--tv-motion-rotate-degrees: 360deg; /* 旋转角度 */

/* ---------- 滚动文字 (scroll.less) ---------- */
--tv-motion-scroll-speed: 3s; /* 动画时长 */
--tv-motion-scroll-offset-x: 300px; /* X轴初始位移 */
--tv-motion-scroll-offset-x-end: -100%; /* X轴结束位移 */
--tv-motion-scroll-offset-y: 100%; /* Y轴初始位移 */
--tv-motion-scroll-offset-y-end: -100%; /* Y轴结束位移 */

/* ---------- 光泽闪烁 (shine.less) ---------- */
--tv-motion-shine-speed: 1s; /* 动画时长 */
--tv-motion-shine-offset-x: -12px; /* X轴背景位移 */
--tv-motion-shine-offset-y: -12px; /* Y轴背景位移 */

/* ---------- 滑动方向 (slide.less) ---------- */
--tv-motion-slide-speed: 0.3s; /* 动画时长 */
--tv-motion-slide-opacity-mid: 0.6; /* 中间透明度 */
/* X轴偏移 */
--tv-motion-slide-offset-left: -100%; /* 左侧初始位移 */
--tv-motion-slide-offset-left-mid: -50%; /* 左侧中间位移 */
--tv-motion-slide-offset-right: 100%; /* 右侧初始位移 */
--tv-motion-slide-offset-right-mid: 50%; /* 右侧中间位移 */
/* Y轴偏移 */
--tv-motion-slide-offset-top: -100%; /* 顶部初始位移 */
--tv-motion-slide-offset-top-mid: -50%; /* 顶部中间位移 */
--tv-motion-slide-offset-bottom: 100%; /* 底部初始位移 */
--tv-motion-slide-offset-bottom-mid: 50%; /* 底部中间位移 */

/* ---------- 描边循环 (stroke.less) ---------- */
--tv-motion-stroke-speed: 1.5s; /* 动画时长 */
--tv-motion-stroke-dasharray-0: 1, 200; /* 初始 dasharray */
--tv-motion-stroke-dasharray-50: 90, 150; /* 中间 dasharray */
--tv-motion-stroke-dasharray-100: 90, 150; /* 结束 dasharray */
--tv-motion-stroke-offset-0: 0; /* 初始 dashoffset */
--tv-motion-stroke-offset-50: -40px; /* 中间 dashoffset */
--tv-motion-stroke-offset-100: -120px; /* 结束 dashoffset */
--tv-motion-stroke-offset-reverse-50: 40px; /* 反向中间 dashoffset */
--tv-motion-stroke-offset-reverse-100: 120px; /* 反向结束 dashoffset */

/* ---------- Tab切换 (tab.less) ---------- */
--tv-motion-tab-speed: 0.3s; /* 动画时长 */
--tv-motion-tab-opacity-start: 0; /* 初始透明度 */
--tv-motion-tab-opacity-end: 1; /* 结束透明度 */
--tv-motion-tab-offset-x-start: 100%; /* X轴初始位移 */
--tv-motion-tab-offset-x-end: 0; /* X轴结束位移 */
--tv-motion-tab-offset-x-start-left: -100%; /* 左侧初始位移 */
--tv-motion-tab-offset-y-start: 100%; /* Y轴初始位移 */
--tv-motion-tab-offset-y-start-down: -100%; /* 下方初始位移 */
--tv-motion-tab-offset-y-end: 0; /* Y轴结束位移 */

/* ---------- 弹出缩放 (zoom.less) ---------- */
--tv-motion-scale-speed: 0.3s; /* 动画时长 */
--tv-motion-scale-start: 0; /* 初始缩放 */
--tv-motion-scale-mid: 0.5; /* 中间缩放 */
--tv-motion-scale-end: 1; /* 结束缩放 */
--tv-motion-scale-opacity-start: 0; /* 初始透明度 */
--tv-motion-scale-opacity-mid: 0.5; /* 中间透明度 */
--tv-motion-scale-opacity-end: 1; /* 结束透明度 */
}
29 changes: 4 additions & 25 deletions packages/theme/src/chart-core/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

@import '../custom.less';
@import './vars.less';
@import '../motion/index.less';

@chart-prefix-cls: ~'@{css-prefix}chart';

Expand Down Expand Up @@ -49,13 +50,14 @@
background-color: var(--tv-ChartCore-data-empty-bg-color);

.circular {
--tv-motion-rotate-speed: 2s;
width: 42px;
height: 42px;
animation: loading-rotate 2s linear infinite;
animation: rotate-spin var(--tv-motion-rotate-speed) linear infinite;
}

.path {
animation: loading-dash 1.5s ease-in-out infinite;
animation: stroke-dash-loop var(--tv-motion-stroke-speed) ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
Expand All @@ -68,26 +70,3 @@
filter: blur(1px);
}
}

@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}

@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}

50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}

100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
104 changes: 12 additions & 92 deletions packages/theme/src/dialog-box/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

@import '../custom.less';
@import './vars.less';
@import '../motion/index.less';

@dialog-box-prefix-cls: ~'@{css-prefix}dialog-box';

Expand Down Expand Up @@ -209,118 +210,37 @@
}

.v-modal-enter {
animation: v-modal-in 0.2s ease;
--tv-motion-fade-speed: 0.2s;
animation: fade-in var(--tv-motion-fade-speed) ease;
}

.v-modal-leave {
animation: v-modal-out 0.2s ease forwards;
}

@keyframes v-modal-in {
0% {
opacity: 0;
}
}

@keyframes v-modal-out {
100% {
opacity: 0;
}
--tv-motion-fade-speed: 0.2s;
animation: fade-out var(--tv-motion-fade-speed) ease forwards;
}

.dialog-slideRight-enter-active {
animation: slideRight 0.5s ease-in forwards;
animation: slide-right-in var(--tv-motion-slide-speed) ease-in forwards;
}

.dialog-slideRight-leave-active {
animation: slideRightout 0.5s ease-in forwards;
}

@keyframes slideRight {
0% {
opacity: 0;
transform: translateX(100%);
}

50% {
opacity: 0.6;
transform: translateX(50%);
}

100% {
opacity: 1;
transform: translateX(0%);
}
}

@keyframes slideRightout {
0% {
opacity: 1;
transform: translateX(0%);
}

50% {
opacity: 0.6;
transform: translateX(50%);
}

100% {
opacity: 0;
transform: translateX(100%);
}
animation: slide-right-out var(--tv-motion-slide-speed) ease-in forwards;
}

.dialog-fade-enter-active {
animation: dialog-fade-in 0.3s;
animation: fade-in-up var(--tv-motion-fade-speed);
}

.dialog-fade-leave-active {
.@{dialog-box-prefix-cls} {
animation: dialog-fade-out 3s;
}
animation: dialog-fade-out 0.3s;
}

@keyframes dialog-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}

100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}

@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}

100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
--tv-motion-fade-speed: 3s;
animation: fade-out-up var(--tv-motion-fade-speed);
}
animation: fade-out-up var(--tv-motion-fade-speed);
}

.enlarge-enter-active {
animation: enlarge-in 350ms linear;
}

@keyframes enlarge-in {
0% {
transform: scale(0);
}

50% {
transform: scale(0.5);
}

100% {
transform: scale(1);
}
animation: enlarge-in var(--tv-motion-scale-speed) linear;
}

@media (max-width: 480px) {
Expand Down
Loading