feat: Complete comprehensive UI/UX enhancement phase
Enhanced Interactive Components: - Created InteractiveButton with ripple effects, haptic feedback, and multiple variants - Developed InteractiveInput and InteractiveTextarea with real-time validation and status indicators - Added FloatingActionButton for quick actions with elegant tooltips - Implemented comprehensive micro-interactions and animations Advanced Loading & Skeleton States: - Enhanced SkeletonLoader with multiple variants (model, material, template, table-row) - Added specialized skeleton components (ModelCardSkeleton, MaterialCardSkeleton, etc.) - Created EnhancedLoadingState with progress indicators and operation tracking - Implemented BatchOperationLoading for complex workflows Optimized Form Experience: - Upgraded ProjectForm with new interactive components - Added real-time validation feedback and error animations - Implemented smart input states (success, error, loading) - Enhanced user feedback with visual and haptic responses Perfected Empty States: - Redesigned EmptyState with multiple variants and illustrations - Created specialized empty state components (EmptyProjectList, EmptyModelList, etc.) - Added contextual tips and guidance for better user onboarding - Implemented error states and recovery actions Advanced Data Display: - Built comprehensive DataTable with search, sort, filter, and pagination - Created flexible CardGrid with view switching and bulk operations - Added row selection, bulk actions, and advanced filtering - Implemented responsive layouts and mobile optimization Rich Animation System: - Added 20+ new micro-interaction animations - Implemented button press, success pulse, error shake effects - Created smooth slide-in animations for all directions - Added loading dots, heartbeat, and bounce-in animations Key Features: - Ripple effects on button clicks with haptic feedback - Real-time form validation with animated error states - Contextual empty states with actionable guidance - Advanced data tables with full CRUD operations - Responsive card grids with multiple view modes - Comprehensive loading states for better perceived performance All components now provide rich visual feedback, smooth animations, and professional user experience that matches modern design standards.
This commit is contained in:
imeepos
@@ -311,6 +311,273 @@
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ===== 骨架屏动画 ===== */
|
||||
|
||||
/* 骨架屏波浪动画 */
|
||||
@keyframes skeletonWave {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏脉冲动画 */
|
||||
@keyframes skeletonPulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏闪烁动画 */
|
||||
@keyframes skeletonShimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏动画类 */
|
||||
.animate-skeleton-wave {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.animate-skeleton-wave::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.6),
|
||||
transparent
|
||||
);
|
||||
animation: skeletonWave 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-skeleton-pulse {
|
||||
animation: skeletonPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-loading-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#f0f0f0 25%,
|
||||
#e0e0e0 50%,
|
||||
#f0f0f0 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: skeletonShimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* 骨架屏容器优化 */
|
||||
.skeleton-container {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* ===== 微交互动画 ===== */
|
||||
|
||||
/* 按钮点击反馈 */
|
||||
@keyframes buttonPress {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮悬停发光效果 */
|
||||
@keyframes buttonGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* 成功反馈动画 */
|
||||
@keyframes successPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
background-color: rgb(34, 197, 94);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
background-color: rgb(22, 163, 74);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
background-color: rgb(34, 197, 94);
|
||||
}
|
||||
}
|
||||
|
||||
/* 错误震动动画 */
|
||||
@keyframes errorShake {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载点动画 */
|
||||
@keyframes loadingDots {
|
||||
0%, 20% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* 心跳动画 */
|
||||
@keyframes heartbeat {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹跳进入动画 */
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 滑入动画 */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 微交互动画类 */
|
||||
.animate-button-press {
|
||||
animation: buttonPress 0.15s ease-out;
|
||||
}
|
||||
|
||||
.animate-button-glow {
|
||||
animation: buttonGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-success-pulse {
|
||||
animation: successPulse 0.6s ease-out;
|
||||
}
|
||||
|
||||
.animate-error-shake {
|
||||
animation: errorShake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-loading-dots {
|
||||
animation: loadingDots 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-heartbeat {
|
||||
animation: heartbeat 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-bounce-in {
|
||||
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.animate-slide-in-up {
|
||||
animation: slideInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-down {
|
||||
animation: slideInDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-left {
|
||||
animation: slideInLeft 0.3s ease-out;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 减少动画偏好设置 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-fade-in-up,
|
||||
@@ -320,7 +587,10 @@
|
||||
.animate-modal-scale-in,
|
||||
.animate-modal-slide-in,
|
||||
.animate-modal-fade-out,
|
||||
.animate-modal-scale-out {
|
||||
.animate-modal-scale-out,
|
||||
.animate-skeleton-wave,
|
||||
.animate-skeleton-pulse,
|
||||
.animate-loading-shimmer {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
@@ -334,6 +604,10 @@
|
||||
.modal-container {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.animate-skeleton-wave::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
|
||||
Reference in New Issue
Block a user