feat: 优化hover动效

baidu · Feb 24, 2025 · 346a391 · 346a391
1 parent e579686
commit 346a391
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 16 deletions.
diff --git a/packages/amis-core/src/utils/animations.ts b/packages/amis-core/src/utils/animations.ts
@@ -18,6 +18,7 @@ export interface AnimationsProps {
     type: string;
     duration?: number;
     delay?: number;
+    repeat?: string;
   };
   exit?: {
     type: string;
@@ -52,19 +53,31 @@ function generateStyleByAnimation(
 }
 
 function generateStyleByHover(
-  className: string[],
+  className: string,
   animation: {
     name: string;
     duration?: number;
     delay?: number;
+    repeat?: string;
   }
 ) {
+  let style = {};
+  if (['hoverFlash', 'hoverShake'].includes(animation.name)) {
+    style = {
+      [`${className}:hover,${className}-show`]: {
+        animation: `${animation.name} ${animation.duration || 1}s ease ${
+          animation.delay || 0
+        }s ${animation.repeat || 1}`
+      }
+    };
+  }
   return {
-    [className.join(',')]: {
+    [className]: {
       transition: `all ${animation.duration || 1}s ease ${
         animation.delay || 0
       }s`
-    }
+    },
+    ...style
   };
 }
 
@@ -81,10 +94,11 @@ export function createAnimationStyle(
     styleConfig = Object.assign(
       styleConfig,
       key === 'hover'
-        ? generateStyleByHover([`.${animationConfig.type}-${id}-${key}`], {
+        ? generateStyleByHover(`.${animationConfig.type}-${id}-${key}`, {
             name: animationConfig.type,
             duration: animationConfig.duration,
-            delay: animationConfig.delay
+            delay: animationConfig.delay,
+            repeat: animationConfig.repeat as string
           })
         : generateStyleByAnimation([`.${animationConfig.type}-${id}-${key}`], {
             name: animationConfig.type,

diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx
@@ -266,6 +266,22 @@ const animationOptions = {
       label: '缩小效果',
       value: 'hoverZoomOut'
     },
+    {
+      label: '向上滑动',
+      value: 'hoverUp'
+    },
+    {
+      label: '向下滑动',
+      value: 'hoverDown'
+    },
+    {
+      label: '向左滑动',
+      value: 'hoverLeft'
+    },
+    {
+      label: '向右滑动',
+      value: 'hoverRight'
+    },
     {
       label: '阴影增强',
       value: 'hoverShadow'
@@ -275,16 +291,16 @@ const animationOptions = {
       value: 'hoverBorder'
     },
     {
-      label: '内容上升',
-      value: 'hoverUp'
+      label: '内容翻转',
+      value: 'hoverFlip'
     },
     {
-      label: '内容下降',
-      value: 'hoverDown'
+      label: '闪烁',
+      value: 'hoverFlash'
     },
     {
-      label: '内容翻转',
-      value: 'hoverFlip'
+      label: '抖动',
+      value: 'hoverShake'
     }
   ],
   exit: [
@@ -1398,6 +1414,7 @@ setSchemaTpl('animation', () => {
     const className = `${animations[type].type}-${id}-${type}`;
     if (type === 'hover') {
       el?.classList.add(`amis-${animations[type].type}-show`);
+      el?.classList.add(`${animations[type].type}-${id}-hover-show`);
     }
     el?.classList.add(className);
     createAnimationStyle(id, animations);
@@ -1419,6 +1436,7 @@ setSchemaTpl('animation', () => {
       el?.classList.remove(className);
       if (type === 'hover') {
         el?.classList.remove(`amis-${animations[type].type}-show`);
+        el?.classList.remove(`${animations[type].type}-${id}-hover-show`);
       }
 
       if (highlightDom) {
@@ -1608,7 +1626,22 @@ setSchemaTpl('animation', () => {
           ]
         }
       ]),
-      ...animation('hover', '悬浮动画'),
+      ...animation('hover', '悬浮动画', [
+        {
+          label: '重复',
+          type: 'select',
+          name: 'animations.hover.repeat',
+          value: '2',
+          visibleOn:
+            'animations.hover.type =="hoverFlash" || animations.hover.type =="hoverShake"',
+          options: [
+            ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => ({
+              label: i,
+              value: i
+            }))
+          ]
+        }
+      ]),
       ...animation('exit', '退出动画', [
         {
           label: tipedLabel('不可见时触发', '组件退出可见区域触发进入动画'),

diff --git a/packages/amis-ui/scss/base/_animate.scss b/packages/amis-ui/scss/base/_animate.scss
@@ -1,13 +1,13 @@
 // 内容放大
 .amis-hoverZoomIn-show,
 .amis-hoverZoomIn:hover {
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 
 // 内容缩小
 .amis-hoverZoomOut-show,
 .amis-hoverZoomOut:hover {
-  transform: scale(0.9);
+  transform: scale(0.95);
 }
 
 // 阴影增强
@@ -26,17 +26,59 @@
 // 内容上升
 .amis-hoverUp-show,
 .amis-hoverUp:hover {
-  transform: translateY(-5px);
+  transform: translateY(-4px);
 }
 
 // 内容下降
 .amis-hoverDown-show,
 .amis-hoverDown:hover {
-  transform: translateY(5px);
+  transform: translateY(4px);
+}
+
+// 向左滑动
+.amis-hoverLeft-show,
+.amis-hoverLeft:hover {
+  transform: translateX(-4px);
+}
+
+// 向右滑动
+.amis-hoverRight-show,
+.amis-hoverRight:hover {
+  transform: translateX(4px);
 }
 
 // 内容翻转
 .amis-hoverFlip-show,
 .amis-hoverFlip:hover {
   transform: rotateY(180deg);
 }
+
+// 闪烁
+@keyframes hoverFlash {
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+// 抖动
+@keyframes hoverShake {
+  from,
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  30% {
+    -webkit-transform: translate3d(-5px, 0, 0);
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  60% {
+    -webkit-transform: translate3d(5px, 0, 0);
+    transform: translate3d(5px, 0, 0);
+  }
+}