Просмотр исходного кода

✨ feat(ui): enhance fade-in animation effect for streaming text rendering

- Add multi-dimensional animation with translateY, scale, and blur transforms
- Introduce 60% keyframe for smoother animation progression
- Extend animation duration from 0.4s to 0.6s for better visual impact
- Apply cubic-bezier(0.22, 1, 0.36, 1) easing for more natural motion
- Add will-change property to optimize rendering performance
- Improve perceived responsiveness during AI response streaming

The enhanced animation now provides a more polished and engaging user
experience when AI responses are being streamed, with text appearing
smoothly from bottom-up with subtle scaling and blur effects.
Apple\Apple 9 месяцев назад
Родитель
Сommit
e39391cfb0
1 измененных файлов с 10 добавлено и 2 удалено
  1. 10 2
      web/src/components/common/markdown/markdown.css

+ 10 - 2
web/src/components/common/markdown/markdown.css

@@ -424,13 +424,21 @@ pre:hover .copy-code-button {
 @keyframes fade-in {
   0% {
     opacity: 0;
+    transform: translateY(6px) scale(0.98);
+    filter: blur(3px);
+  }
+  60% {
+    opacity: 0.85;
+    filter: blur(0.5px);
   }
-
   100% {
     opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
   }
 }
 
 .animate-fade-in {
-  animation: fade-in 0.4s ease-in-out both;
+  animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+  will-change: opacity, transform;
 }