feat: 添加水印入口动画，优化动画效果和交互处理

Signed-off-by: wangsimiao1 <wangsimiao1@xiaomi.com>

Author: WangSimiao2000

_javascript/commons.js

@@ -1,5 +1,17 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 
+/* Watermark entrance animation — block interaction until done */
+document.body.classList.add('watermark-animating');
+document.body.addEventListener(
+  'animationend',
+  (e) => {
+    if (e.animationName === 'watermark-enter') {
+      document.body.classList.remove('watermark-animating');
+    }
+  },
+  { once: true }
+);
+
 initSidebar();
 initTopbar();
 basic();

_sass/base/_base.scss

@@ -461,13 +461,19 @@ mjx-container {
 }
 
 @keyframes watermark-enter {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) rotate(-18deg) scale(0.6);
+  0% {
+    transform: translate(-50%, -50%) rotate(-18deg) scale(1);
   }
 
-  to {
-    opacity: 1;
+  30% {
+    transform: translate(-50%, -50%) rotate(-18deg) scale(1.12);
+  }
+
+  60% {
+    transform: translate(-50%, -50%) rotate(-18deg) scale(0.97);
+  }
+
+  100% {
     transform: translate(-50%, -50%) rotate(-18deg) scale(1);
   }
 }
@@ -488,15 +494,11 @@ body {
     pointer-events: none;
     user-select: none;
     z-index: 0;
-    opacity: 1;
-    transition: opacity 0.5s v.$ease-spring-soft,
-      transform 0.5s v.$ease-spring-soft;
-    animation: watermark-enter 0.8s v.$ease-spring both;
+    animation: watermark-enter 0.8s v.$ease-spring;
   }
 
-  &[sidebar-display]::after {
-    opacity: 0;
-    transform: translate(-50%, -50%) rotate(-18deg) scale(0.85);
+  &.watermark-animating {
+    pointer-events: none;
   }
 }