banana v1

styles/public/transition.ts

@@ -1,6 +1,6 @@
 import { css } from "src/types/vars";
 
-// 简单的渐变过渡
+// 增强的渐变过渡，参考 Nano-Banana-AI-Image-Editor 的设计
 export const transition = css`
   // 差异对比的代码折叠按钮
   .code-expander-button,
@@ -36,7 +36,7 @@ export const transition = css`
   .ui.selection.active.dropdown:hover .menu,
   .ui.vertical.menu .header.item,
   .ui.secondary.menu .item {
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   // Gitea 表单元素原始过渡覆盖
   input,
@@ -56,6 +56,74 @@ export const transition = css`
   .ui.form input[type="text"],
   .ui.form input[type="file"],
   .ui.form input[type="url"] {
-    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
-`;
+  
+  // 添加按钮点击脉冲动画
+  @keyframes pulse-click {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(0.95);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  
+  .pulse-click {
+    animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  // 添加滑入动画
+  @keyframes slide-in-from-top-full {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slide-in-from-right {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes slide-out-to-right {
+    0% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+  
+  .animate-in {
+    animation-duration: 300ms;
+    animation-fill-mode: both;
+  }
+  
+  .slide-in-from-top-full {
+    animation-name: slide-in-from-top-full;
+  }
+  
+  .slide-in-from-right {
+    animation-name: slide-in-from-right;
+  }
+  
+  .slide-out-to-right {
+    animation-name: slide-out-to-right;
+  }
+`;