Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 为DIY标签组件添加可配置的动画效果

Browse Source
This commit is contained in:
ZF Sun
2026-02-07 11:41:59 +08:00
parent bb58866192
commit 1c3f759b35
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components-diy/diy-tab.vue
View File

@@ -302,6 +302,12 @@ export default {
borderRadius: 4
};
// 动画配置
const animationConfig = {
animationDuration: 0.3,
animationTimingFunction: 'ease-in-out'
};
// 导航栏边框样式
const navBorderConfig = {
showNavBorder: true,
@@ -339,6 +345,7 @@ export default {
...contentConfig,
...borderConfig,
...navBorderConfig,
...animationConfig,
...customStylesConfig
};
@@ -377,6 +384,12 @@ export default {
style['--card-active-hover-bg-color'] = this.mergedValue.cardActiveHoverBgColor || '#228be6';
style['--card-active-hover-text-color'] = this.mergedValue.cardActiveHoverTextColor || '#ffffff';
// 应用动画配置
if (this.mergedValue.animation) {
style['--animation-duration'] = (this.mergedValue.animationDuration || 0.3) + 's';
style['--animation-timing-function'] = this.mergedValue.animationTimingFunction || 'ease-in-out';
}
return style;
},
@@ -1041,7 +1054,7 @@ export default {
// 悬停动画效果
&.hover-animation {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
&:hover {
color: var(--hover-color, #3b82f6);
@@ -1073,7 +1086,7 @@ export default {
.tab-indicator {
position: absolute;
background-color: var(--indicator-color, #339af0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
will-change: left, right, top, bottom, width, height;
bottom: 0;
left: 16px;
@@ -1109,7 +1122,7 @@ export default {
display: none;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
height: 100%;
box-sizing: border-box;
width: 100%;
@@ -1120,7 +1133,7 @@ export default {
display: block;
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
}
// 减少动画效果
@@ -1184,7 +1197,7 @@ export default {
padding: 8px 16px;
&.hover-animation {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
@@ -1225,7 +1238,7 @@ export default {
color: var(--card-text-color, #6c757d);
&.hover-animation {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);