diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 142890c1..b5f9dac0 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -16,51 +16,51 @@
   <div class="anim">
     <ul class="layui-border-box site-doc-icon site-doc-anim">
       <li style="height:auto">
-        <div class="layui-anim layui-anim-down">顶部往下滑入</div>
+        <div class="layui-anim layui-anim-down" @click="playAnimation">顶部往下滑入</div>
         <div class="code">layui-anim-down</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-downbit">微微往下滑入</div>
+        <div class="layui-anim layui-anim-downbit" @click="playAnimation">微微往下滑入</div>
         <div class="code">layui-anim-downbit</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-up">底部往上滑入</div>
+        <div class="layui-anim layui-anim-up" @click="playAnimation">底部往上滑入</div>
         <div class="code">layui-anim-up</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-upbit">微微往上滑入</div>
+        <div class="layui-anim layui-anim-upbit" @click="playAnimation">微微往上滑入</div>
         <div class="code">layui-anim-upbit</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-scale">平滑放大</div>
+        <div class="layui-anim layui-anim-scale" @click="playAnimation">平滑放大</div>
         <div class="code">layui-anim-scale</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-scaleSpring">弹簧式放大</div>
+        <div class="layui-anim layui-anim-scaleSpring" @click="playAnimation">弹簧式放大</div>
         <div class="code">layui-anim-scaleSpring</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-scalesmall">平滑放小</div>
+        <div class="layui-anim layui-anim-scalesmall" @click="playAnimation">平滑放小</div>
         <div class="code">layui-anim-scalesmall</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-scalesmall-spring">弹簧式放小</div>
+        <div class="layui-anim layui-anim-scalesmall-spring" @click="playAnimation">弹簧式放小</div>
         <div class="code">layui-anim-scalesmall-spring</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-fadein">渐现</div>
+        <div class="layui-anim layui-anim-fadein" @click="playAnimation">渐现</div>
         <div class="code">layui-anim-fadein</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-fadeout">渐隐</div>
+        <div class="layui-anim layui-anim-fadeout" @click="playAnimation">渐隐</div>
         <div class="code">layui-anim-fadeout</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-rotate">360度旋转</div>
+        <div class="layui-anim layui-anim-rotate" @click="playAnimation">360度旋转</div>
         <div class="code">layui-anim-rotate</div>
       </li>
       <li style="height:auto">
-        <div class="layui-anim layui-anim-rotate layui-anim-loop">循环动画</div>
+        <div class="layui-anim layui-anim-rotate layui-anim-loop" @click="playAnimation">循环动画</div>
         <div class="code">追加：layui-anim-loop</div>
       </li>
     </ul>
@@ -72,7 +72,16 @@ import { ref } from 'vue'
 
 export default {
   setup() {
+    const playAnimation = (e) => {
+      const el = e.currentTarget;
+      const targetClass = el.classList[1];
+      el.classList.remove(targetClass);
+      setTimeout(() => {
+        el.classList.add(targetClass);
+      },100) 
+    }
     return {
+      playAnimation
     }
   }
 }