Quellcode durchsuchen

style(frontend): transition:all 改为按属性过渡(22 文件)

微信小程序中 transition:all 会在任意属性变化时触发整元素重排/重绘,逐处限定为实际生效的属性(color/background-color/border-color/transform/shadow 等),降低渲染开销;同时与 wuxing-sandbox 已有写法保持一致。
liaoxg vor 6 Tagen
Ursprung
Commit
e4e9c6c9d2

+ 1 - 1
cfc-frontend/components/DimensionActivities.vue

@@ -320,7 +320,7 @@ export default {
   height: 8rpx;
   border-radius: 50%;
   background: #D1D5DB;
-  transition: all 0.3s ease;
+  transition: width 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
 }
 
 .dot.active {

+ 1 - 1
cfc-frontend/components/wuxing-sandbox.vue

@@ -796,7 +796,7 @@ export default {
   background: rgba(143,197,232,0.08);
   border: 1rpx solid rgba(143,197,232,0.15);
   border-radius: 30rpx 0 0 30rpx;
-  transition: all 0.2s;
+  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
 }
 .toggle-item--family {
   border-radius: 0 30rpx 30rpx 0;

+ 1 - 1
cfc-frontend/pages/article-center/index.vue

@@ -438,7 +438,7 @@ onLoad(options) {
   border-radius: 26rpx;
   border: 2rpx solid #f0f0f0;
   flex-shrink: 0;
-  transition: all 0.2s;
+  transition: font-weight 0.2s;
 }
 .ac-tab.active {
   font-weight: 600;

+ 1 - 1
cfc-frontend/pages/body-detail/dimension-questionnaire.vue

@@ -562,7 +562,7 @@ export default {
   border: 2rpx solid $facade-fill-3;
   border-radius: 12rpx;
   margin-bottom: 16rpx;
-  transition: all 0.2s;
+  transition: border-color 0.2s, background-color 0.2s;
 }
 .qd-option.selected {
   border-color: $brand-primary;

+ 1 - 1
cfc-frontend/pages/child/tasks.vue

@@ -439,7 +439,7 @@ export default {
   gap: 8rpx;
   padding: 20rpx 12rpx;
   border-radius: var(--radius-lg, 32rpx);
-  transition: all var(--transition-base, 0.25s ease);
+  transition: background-color var(--transition-base, 0.25s ease), box-shadow var(--transition-base, 0.25s ease);
   position: relative;
 }
 

+ 1 - 1
cfc-frontend/pages/cognitive-test/logic-test.vue

@@ -392,7 +392,7 @@ export default {
   background: #24243e;
   text-align: center;
   margin-bottom: 20rpx;
-  transition: all 0.2s;
+  transition: transform 0.2s;
 }
 .q-option:last-child {
   margin-bottom: 0;

+ 4 - 4
cfc-frontend/pages/diet/meal-config.vue

@@ -226,7 +226,7 @@ export default {
 .tab-item {
   flex: 1; text-align: center; padding: 18rpx 0;
   border-radius: 999rpx; font-size: 28rpx; color: #64748B;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
 }
 .tab-active {
   background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
@@ -267,7 +267,7 @@ export default {
   display: flex; align-items: center;
   padding: 16rpx 24rpx; border: 2rpx solid #E2E8F0; border-radius: 20rpx;
   background: #FFFFFF; min-width: 160rpx;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .member-info {
   display: flex; align-items: center; gap: 12rpx;
@@ -337,7 +337,7 @@ export default {
   border-radius: 20rpx;
   padding: 24rpx 30rpx;
   margin-bottom: 30rpx;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 .add-member-entry:active {
   background-color: $uni-primary-pale;
@@ -376,7 +376,7 @@ export default {
   color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
   font-size: 30rpx; font-weight: 600;
   box-shadow: 0 6rpx 20rpx rgba(249, 115, 22, 0.3);
-  transition: all 0.2s ease;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 .save-btn:active {
   opacity: 0.9;

+ 1 - 1
cfc-frontend/pages/family/self-check-ai.vue

@@ -465,7 +465,7 @@ export default {
   background: #F9FAFB;
   border-radius: 12rpx;
   border: 2rpx solid transparent;
-  transition: all 0.2s;
+  transition: background-color 0.2s;
 }
 .sc-opt:active {
   background: #EEF2FF;

+ 1 - 1
cfc-frontend/pages/family/self-check.vue

@@ -371,7 +371,7 @@ export default {
   border: 2rpx solid #E5E7EB;
   border-radius: 14rpx;
   margin-bottom: 14rpx;
-  transition: all 0.2s;
+  transition: border-color 0.2s, background-color 0.2s;
 }
 .sc-opt-sel {
   border-color: #F97316;

+ 2 - 2
cfc-frontend/pages/growth/diet-checkin.vue

@@ -507,7 +507,7 @@ success: function(res) {
 .form-group { margin-bottom: 20rpx; }
 .form-label { font-size: 26rpx; color: #333; font-weight: 500; margin-bottom: 10rpx; display: block; }
 .tag-row { display: flex; flex-wrap: wrap; gap: 10rpx; }
-.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid #e8e8e8; background: #fafafa; transition: all 0.2s ease; }
+.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid #e8e8e8; background: #fafafa; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
 .tag-active { border-color: #F97316; background: #FFF3E0; box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.15); }
 .tag-btn text { font-size: 26rpx; color: #666; }
 .tag-active text { color: #F97316; font-weight: 600; }
@@ -546,7 +546,7 @@ success: function(res) {
 
 /* ===== 提交按钮 ===== */
 .submit-wrap { padding: 24rpx 20rpx 32rpx; }
-.submit-btn { background: linear-gradient(135deg, #FF8C42, #F97316); color: #fff; text-align: center; padding: 22rpx 0; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.3); transition: all 0.2s ease; }
+.submit-btn { background: linear-gradient(135deg, #FF8C42, #F97316); color: #fff; text-align: center; padding: 22rpx 0; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.3); transition: transform 0.2s ease; }
 .submit-btn:active { transform: scale(0.98); }
 .submitting { opacity: 0.6; }
 

+ 3 - 3
cfc-frontend/pages/growth/exercise-checkin.vue

@@ -504,14 +504,14 @@ export default {
 .form-group { margin-bottom: 20rpx; }
 .form-label { font-size: 26rpx; color: #333; font-weight: 500; margin-bottom: 10rpx; display: block; }
 .tag-row { display: flex; flex-wrap: wrap; gap: 10rpx; }
-.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid #e8e8e8; background: #fafafa; transition: all 0.2s ease; }
+.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid #e8e8e8; background: #fafafa; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
 .tag-active { border-color: #F97316; background: #FFF3E0; box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.15); }
 .tag-btn text { font-size: 26rpx; color: #666; }
 .tag-active text { color: #F97316; font-weight: 600; }
 .form-input { width: 100%; height: 76rpx; border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 0 16rpx; font-size: 26rpx; background: #FAFAFA; box-sizing: border-box; }
 .step-sync-row { display: flex; align-items: center; gap: 12rpx; }
 .step-input { flex: 1; }
-.sync-btn { padding: 12rpx 28rpx; border-radius: 30rpx; border: 2rpx solid #F97316; background: #FFF3E0; transition: all 0.2s ease; flex-shrink: 0; }
+.sync-btn { padding: 12rpx 28rpx; border-radius: 30rpx; border: 2rpx solid #F97316; background: #FFF3E0; transition: opacity 0.2s ease; flex-shrink: 0; }
 .sync-btn text { font-size: 24rpx; color: #F97316; font-weight: 500; }
 .syncing { opacity: 0.5; }
 .step-hint { font-size: 22rpx; color: #10B981; margin-top: 6rpx; display: block; }
@@ -548,7 +548,7 @@ export default {
 
 /* ===== 提交按钮 ===== */
 .submit-wrap { padding: 24rpx 20rpx 32rpx; }
-.submit-btn { background: linear-gradient(135deg, #FF8C42, #F97316); color: #fff; text-align: center; padding: 22rpx 0; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.3); transition: all 0.2s ease; }
+.submit-btn { background: linear-gradient(135deg, #FF8C42, #F97316); color: #fff; text-align: center; padding: 22rpx 0; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.3); transition: transform 0.2s ease; }
 .submit-btn:active { transform: scale(0.98); }
 .submitting { opacity: 0.6; }
 

+ 2 - 2
cfc-frontend/pages/growth/sleep-checkin.vue

@@ -731,13 +731,13 @@ export default {
   padding: 26rpx 0;
   text-align: center;
   box-shadow: 0 12rpx 28rpx rgba(79, 70, 229, 0.35);
-  transition: all 0.2s ease;
+  transition: transform 0.2s ease;
 }
 .submit-btn:active {
   transform: scale(0.98);
   box-shadow: 0 6rpx 14rpx rgba(79, 70, 229, 0.25);
 }
-.submit-text { color: #fff; font-size: 30rpx; font-weight: 700; letter-spacing: 2rpx; }
+.submit-text { color: #fff; font-size: 30rpx; font-weight: 700; letter-spacing: 2rpx; })
 .submitting { opacity: 0.6; }
 
 /* ===== 历史记录 ===== */

+ 1 - 1
cfc-frontend/pages/health/gut-flora-risks-detail.vue

@@ -393,7 +393,7 @@ export default {
   margin-bottom: 16rpx;
   box-shadow: 0 2rpx 16rpx rgba(0,0,0,0.06);
   border-left: 10rpx solid #10B981;
-  transition: all 0.2s;
+  transition: border-left-color 0.2s, background-color 0.2s;
 }
 .risk-level-warning { border-left-color: #F59E0B; }
 .risk-level-high { border-left-color: #EF4444; }

+ 2 - 2
cfc-frontend/pages/health/health-plan-summary.vue

@@ -1302,7 +1302,7 @@ selectedMembers: function() {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s;
+  transition: background-color 0.3s, color 0.3s;
 }
 .step.active .step-num { background: #F97316; color: #fff; }
 .step.done .step-num { background: #4CAF50; color: #fff; }
@@ -1653,7 +1653,7 @@ selectedMembers: function() {
   font-size: calc(26rpx * var(--font-scale, 1));
   color: #334155;
   font-weight: 500;
-  transition: all 0.2s;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
 }
 .member-tab.active {
   background: #FFF7ED;

+ 1 - 1
cfc-frontend/pages/health/teacher-service.vue

@@ -240,7 +240,7 @@ export default {
   border-radius: 16rpx;
   padding: 24rpx;
   border: 3rpx solid #E5E7EB;
-  transition: all 0.2s;
+  transition: border-color 0.2s, background-color 0.2s;
 }
 .ts-card.active {
   border-color: #F97316;

+ 1 - 1
cfc-frontend/pages/home-pages/components/AdBanner.vue

@@ -369,7 +369,7 @@ export default {
   height: 8rpx;
   border-radius: 50%;
   background: rgba(255,255,255,0.5);
-  transition: all 0.3s ease;
+  transition: width 0.3s ease, background-color 0.3s ease;
 }
 
 .ad-banner-dot.active {

+ 1 - 1
cfc-frontend/pages/promotion/index.vue

@@ -886,7 +886,7 @@ export default {
   padding-left: 24rpx;
   padding-right: 24rpx;
   min-width: 60%;
-  transition: all 0.3s ease;
+  transition: width 0.3s ease;
 }
 .funnel-label {
   font-size: 26rpx;

+ 1 - 1
cfc-frontend/pages/psych-assessment/quiz.vue

@@ -370,7 +370,7 @@ export default {
   background: #24243e;
   text-align: center;
   margin-bottom: 20rpx;
-  transition: all 0.2s;
+  transition: transform 0.2s;
 }
 
 .option:last-child {

+ 1 - 1
cfc-frontend/pages/tasks/review.vue

@@ -176,7 +176,7 @@ export default {
   border-radius: var(--radius-sm, 12rpx);
   position: relative;
   z-index: 2;
-  transition: all var(--transition-base, 0.25s ease);
+  transition: transform var(--transition-base, 0.25s ease);
   cursor: pointer;
 }
 

+ 2 - 2
cfc-frontend/pages/user-edit/user-edit.vue

@@ -934,7 +934,7 @@ bindReferralIfNotSelf(code).then(function(res) {
 	flex-direction: column;
 	align-items: center;
 	border: 2rpx solid transparent;
-	transition: all 0.3s;
+	transition: border-color 0.3s, background-color 0.3s;
 }
 
 .role-card.active {
@@ -1089,7 +1089,7 @@ bindReferralIfNotSelf(code).then(function(res) {
 	align-items: center;
 	gap: 16rpx;
 	border: 2rpx solid transparent;
-	transition: all 0.3s;
+	transition: border-color 0.3s, background-color 0.3s;
 }
 .mascot-card.active {
 	border-color: #4CAF50;

+ 5 - 5
cfc-frontend/pages/wisdom-detail/self-quiz.vue

@@ -516,7 +516,7 @@ export default {
   justify-content: center;
   border: 3rpx solid $facade-border-soft;
   background: $app-surface;
-  transition: all 0.3s;
+  transition: background-color 0.3s, border-color 0.3s;
 }
 .step-dot--active {
   background: $accent-gold;
@@ -601,7 +601,7 @@ export default {
   flex-direction: column;
   align-items: center;
   border: 3rpx solid transparent;
-  transition: all 0.3s;
+  transition: background-color 0.3s, border-color 0.3s;
   box-sizing: border-box;
 }
 .goal-card--selected {
@@ -648,7 +648,7 @@ export default {
   margin-bottom: 20rpx;
   box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
   border: 3rpx solid transparent;
-  transition: all 0.3s;
+  transition: background-color 0.3s, border-color 0.3s;
 }
 .type-card--selected {
   border-color: $accent-gold;
@@ -762,7 +762,7 @@ export default {
   padding: 24rpx 20rpx;
   border-radius: 16rpx;
   border: 2rpx solid $facade-fill-3;
-  transition: all 0.3s;
+  transition: background-color 0.3s, border-color 0.3s;
 }
 .q-option--selected {
   border-color: $accent-gold;
@@ -826,7 +826,7 @@ export default {
   text-align: center;
   font-size: 28rpx;
   font-weight: bold;
-  transition: all 0.3s;
+  transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
   box-sizing: border-box;
 }
 .btn--primary {

+ 2 - 2
cfc-frontend/pages/wishes/index.vue

@@ -704,7 +704,7 @@ export default {
   font-size: 26rpx;
   font-weight: 500;
   color: var(--text-secondary, #64748B);
-  transition: all 0.25s ease;
+  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
   flex-shrink: 0;
 }
 
@@ -1015,7 +1015,7 @@ export default {
   border-radius: 20rpx;
   background: var(--bg, #F5F9FC);
   border: 2rpx solid var(--border-light, #E2E8F0);
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 .emoji-item--active {