docs(Button): add animated button demo (#11995)

* chore(Button): add animation button demo

* fix: npm run test

* chore(Button): modify text

* chore: add space

packages/vant/src/button/README.md

@@ -109,6 +109,30 @@ app.use(Button);
 </van-button>
 ```
 
+### Animated Button
+
+```html
+<van-button type="danger" round>
+  <van-swipe
+    vertical
+    class="notice-swipe"
+    :autoplay="2000"
+    :touchable="false"
+    :show-indicators="false"
+  >
+    <van-swipe-item>Do Task</van-swipe-item>
+    <van-swipe-item>Lottery</van-swipe-item>
+  </van-swipe>
+</van-button>
+
+<style>
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
+</style>
+```
+
 ## API
 
 ### Props

packages/vant/src/button/README.zh-CN.md

@@ -131,6 +131,32 @@ app.use(Button);
 </van-button>
 ```
 
+### 动画按钮
+
+搭配 Button 和 Swipe 组件，可以实现垂直滚动的动画按钮效果。
+
+```html
+<van-button type="danger" round>
+  <van-swipe
+    vertical
+    class="notice-swipe"
+    :autoplay="2000"
+    :touchable="false"
+    :show-indicators="false"
+  >
+    <van-swipe-item>做任务</van-swipe-item>
+    <van-swipe-item>抽大奖</van-swipe-item>
+  </van-swipe>
+</van-button>
+
+<style>
+  .notice-swipe {
+    height: 40px;
+    line-height: 40px;
+  }
+</style>
+```
+
 ## API
 
 ### Props

packages/vant/src/button/demo/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import VanButton from '..';
+import VanSwipe from '../../swipe';
+import VanSwipeItem from '../../swipe-item';
 import { cdnURL, useTranslate } from '../../../docs/site';
 
 const t = useTranslate({
@@ -31,6 +33,9 @@ const t = useTranslate({
     pure: '单色按钮',
     gradient: '渐变色按钮',
     blockElement: '块级元素',
+    animatedButton: '动画按钮',
+    doTask: '做任务',
+    lottery: '抽大奖',
   },
   'en-US': {
     type: 'Type',
@@ -60,6 +65,9 @@ const t = useTranslate({
     pure: 'Pure',
     gradient: 'Gradient',
     blockElement: 'Block Element',
+    animatedButton: 'Animated Button',
+    doTask: 'Do Task',
+    lottery: 'Lottery',
   },
 });
 </script>
@@ -140,6 +148,21 @@ const t = useTranslate({
       :text="t('gradient')"
     />
   </demo-block>
+
+  <demo-block :title="t('animatedButton')">
+    <van-button type="danger" round>
+      <van-swipe
+        vertical
+        class="notice-swipe"
+        :autoplay="2000"
+        :touchable="false"
+        :show-indicators="false"
+      >
+        <van-swipe-item>{{ t('doTask') }}</van-swipe-item>
+        <van-swipe-item>{{ t('lottery') }}</van-swipe-item>
+      </van-swipe>
+    </van-button>
+  </demo-block>
 </template>
 
 <style lang="less">
@@ -167,4 +190,8 @@ const t = useTranslate({
     margin-bottom: var(--van-padding-sm);
   }
 }
+.notice-swipe {
+  height: 40px;
+  line-height: 40px;
+}
 </style>

packages/vant/src/button/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -420,4 +420,36 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </button>
 </div>
+<div>
+  <!--[-->
+  <button type="button"
+          class="van-button van-button--danger van-button--normal van-button--round"
+          style
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        <!--[-->
+        <div class="van-swipe notice-swipe">
+          <div style="transition-duration:500ms;transform:translateY(0px);"
+               class="van-swipe__track van-swipe__track--vertical"
+          >
+            <!--[-->
+            <div class="van-swipe-item"
+                 style
+            >
+              <!--[-->
+              Do Task
+            </div>
+            <div class="van-swipe-item"
+                 style
+            >
+              <!--[-->
+              Lottery
+            </div>
+          </div>
+        </div>
+      </span>
+    </div>
+  </button>
+</div>
 `;

packages/vant/src/button/test/__snapshots__/demo.spec.ts.snap

@@ -356,4 +356,30 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </button>
 </div>
+<div>
+  <button type="button"
+          class="van-button van-button--danger van-button--normal van-button--round"
+  >
+    <div class="van-button__content">
+      <span class="van-button__text">
+        <div class="van-swipe notice-swipe">
+          <div style="transition-duration: 0ms; transform: translateY(0px); height: 200px;"
+               class="van-swipe__track van-swipe__track--vertical"
+          >
+            <div class="van-swipe-item"
+                 style="height: 100px;"
+            >
+              Do Task
+            </div>
+            <div class="van-swipe-item"
+                 style="height: 100px;"
+            >
+              Lottery
+            </div>
+          </div>
+        </div>
+      </span>
+    </div>
+  </button>
+</div>
 `;