From 6d7be23792da63ecd1cfb2fa85ba66a5591e0d42 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 11 Dec 2024 15:48:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=AF=E6=8C=81=20button=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/animate/animate.scss         |  3 -
 src/packages/animate/demos/h5/demo1.tsx   | 48 +++++----------
 src/packages/animate/demos/h5/demo2.tsx   | 75 ++++++++---------------
 src/packages/animate/demos/taro/demo1.tsx | 48 +++++----------
 src/packages/animate/demos/taro/demo2.tsx | 75 ++++++++---------------
 5 files changed, 86 insertions(+), 163 deletions(-)

diff --git a/src/packages/animate/animate.scss b/src/packages/animate/animate.scss
index 05b13a3e1d..f74d3bc0e5 100644
--- a/src/packages/animate/animate.scss
+++ b/src/packages/animate/animate.scss
@@ -1,7 +1,4 @@
 .nut-animate {
-  .nut-ani-container {
-    display: inline-block;
-  }
   /* Animation css */
   [class*='nut-animate-'] {
     animation-duration: 0.5s;
diff --git a/src/packages/animate/demos/h5/demo1.tsx b/src/packages/animate/demos/h5/demo1.tsx
index 07f24cfe47..d9c40fbd4c 100644
--- a/src/packages/animate/demos/h5/demo1.tsx
+++ b/src/packages/animate/demos/h5/demo1.tsx
@@ -1,37 +1,23 @@
 import React from 'react'
-import { Animate, Button } from '@nutui/nutui-react'
+import { Animate, Button, Space } from '@nutui/nutui-react'
 
-const Demo1 = () => {
-  const style = {
-    marginBottom: '10px',
-  }
+const Demo = () => {
   return (
-    <>
-      <div style={style}>
-        <Animate type="slide-right" action="click">
-          <Button type="primary">由右向左划入</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="slide-left" action="click">
-          <Button type="primary">由左向右划入</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="slide-top" action="click">
-          <Button type="primary">由上至下划入</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="slide-bottom" action="click">
-          <Button type="primary">由下至上划入</Button>
-        </Animate>
-      </div>
-    </>
+    <Space direction="vertical">
+      <Animate type="slide-right" action="click">
+        <Button type="primary">由右向左划入</Button>
+      </Animate>
+      <Animate type="slide-left" action="click">
+        <Button type="primary">由左向右划入</Button>
+      </Animate>
+      <Animate type="slide-top" action="click">
+        <Button type="primary">由上至下划入</Button>
+      </Animate>
+      <Animate type="slide-bottom" action="click">
+        <Button type="primary">由下至上划入</Button>
+      </Animate>
+    </Space>
   )
 }
 
-export default Demo1
+export default Demo
diff --git a/src/packages/animate/demos/h5/demo2.tsx b/src/packages/animate/demos/h5/demo2.tsx
index 4f72090460..cba380f121 100644
--- a/src/packages/animate/demos/h5/demo2.tsx
+++ b/src/packages/animate/demos/h5/demo2.tsx
@@ -1,55 +1,32 @@
 import React from 'react'
-import { Animate, Button } from '@nutui/nutui-react'
+import { Animate, Button, Space } from '@nutui/nutui-react'
 
-const Demo2 = () => {
-  const style = {
-    marginBottom: '10px',
-  }
+const Demo = () => {
   return (
-    <>
-      <div style={style}>
-        <Animate type="shake" loop>
-          <Button type="primary">shake-抖动</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="ripple" loop>
-          <Button type="primary">ripple-心跳</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="breath" loop>
-          <Button type="primary">breath-呼吸灯</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="twinkle" loop>
-          <Button type="primary">twinkle-水波</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="flicker" loop>
-          <Button type="primary">flicker-擦亮</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="jump" loop>
-          <Button type="primary">jump-跳跃</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="float" loop>
-          <Button type="primary">float-漂浮</Button>
-        </Animate>
-      </div>
-    </>
+    <Space direction="vertical">
+      <Animate type="shake" loop>
+        <Button type="primary">shake-抖动</Button>
+      </Animate>
+      <Animate type="ripple" loop>
+        <Button type="primary">ripple-心跳</Button>
+      </Animate>
+      <Animate type="breath" loop>
+        <Button type="primary">breath-呼吸灯</Button>
+      </Animate>
+      <Animate type="twinkle" loop>
+        <Button type="primary">twinkle-水波</Button>
+      </Animate>
+      <Animate type="flicker" loop>
+        <Button type="primary">flicker-擦亮</Button>
+      </Animate>
+      <Animate type="jump" loop>
+        <Button type="primary">jump-跳跃</Button>
+      </Animate>
+      <Animate type="float" loop>
+        <Button type="primary">float-漂浮</Button>
+      </Animate>
+    </Space>
   )
 }
 
-export default Demo2
+export default Demo
diff --git a/src/packages/animate/demos/taro/demo1.tsx b/src/packages/animate/demos/taro/demo1.tsx
index 5d2645d357..c1a07d7066 100644
--- a/src/packages/animate/demos/taro/demo1.tsx
+++ b/src/packages/animate/demos/taro/demo1.tsx
@@ -1,37 +1,23 @@
 import React from 'react'
-import { Animate, Button } from '@nutui/nutui-react-taro'
+import { Animate, Button, Space } from '@nutui/nutui-react-taro'
 
-const Demo1 = () => {
-  const style = {
-    marginBottom: '10px',
-  }
+const Demo = () => {
   return (
-    <>
-      <div style={style}>
-        <Animate type="slide-right" action="click">
-          <Button type="primary">由右向左划入</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="slide-left" action="click">
-          <Button type="primary">由左向右划入</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="slide-top" action="click">
-          <Button type="primary">由上至下划入</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="slide-bottom" action="click">
-          <Button type="primary">由下至上划入</Button>
-        </Animate>
-      </div>
-    </>
+    <Space direction="vertical">
+      <Animate type="slide-right" action="click">
+        <Button type="primary">由右向左划入</Button>
+      </Animate>
+      <Animate type="slide-left" action="click">
+        <Button type="primary">由左向右划入</Button>
+      </Animate>
+      <Animate type="slide-top" action="click">
+        <Button type="primary">由上至下划入</Button>
+      </Animate>
+      <Animate type="slide-bottom" action="click">
+        <Button type="primary">由下至上划入</Button>
+      </Animate>
+    </Space>
   )
 }
 
-export default Demo1
+export default Demo
diff --git a/src/packages/animate/demos/taro/demo2.tsx b/src/packages/animate/demos/taro/demo2.tsx
index e6f2d9bb7f..334e71c302 100644
--- a/src/packages/animate/demos/taro/demo2.tsx
+++ b/src/packages/animate/demos/taro/demo2.tsx
@@ -1,55 +1,32 @@
 import React from 'react'
-import { Animate, Button } from '@nutui/nutui-react-taro'
+import { Animate, Button, Space } from '@nutui/nutui-react-taro'
 
-const Demo2 = () => {
-  const style = {
-    marginBottom: '10px',
-  }
+const Demo = () => {
   return (
-    <>
-      <div style={style}>
-        <Animate type="shake" loop>
-          <Button type="primary">shake-抖动</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="ripple" loop>
-          <Button type="primary">ripple-心跳</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="breath" loop>
-          <Button type="primary">breath-呼吸灯</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="twinkle" loop>
-          <Button type="primary">twinkle-水波</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="flicker" loop>
-          <Button type="primary">flicker-擦亮</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="jump" loop>
-          <Button type="primary">jump-跳跃</Button>
-        </Animate>
-      </div>
-
-      <div style={style}>
-        <Animate type="float" loop>
-          <Button type="primary">float-漂浮</Button>
-        </Animate>
-      </div>
-    </>
+    <Space direction="vertical">
+      <Animate type="shake" loop>
+        <Button type="primary">shake-抖动</Button>
+      </Animate>
+      <Animate type="ripple" loop>
+        <Button type="primary">ripple-心跳</Button>
+      </Animate>
+      <Animate type="breath" loop>
+        <Button type="primary">breath-呼吸灯</Button>
+      </Animate>
+      <Animate type="twinkle" loop>
+        <Button type="primary">twinkle-水波</Button>
+      </Animate>
+      <Animate type="flicker" loop>
+        <Button type="primary">flicker-擦亮</Button>
+      </Animate>
+      <Animate type="jump" loop>
+        <Button type="primary">jump-跳跃</Button>
+      </Animate>
+      <Animate type="float" loop>
+        <Button type="primary">float-漂浮</Button>
+      </Animate>
+    </Space>
   )
 }
 
-export default Demo2
+export default Demo