From b61cf457352b94b11361b06c970f75db38ead6ca Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Fri, 1 Apr 2022 00:45:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(docs):=20animation=20=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=92=AD=E6=94=BE=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/animation.md | 33 ++++++++++++++--------
 1 file changed, 21 insertions(+), 12 deletions(-)

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
     }
   }
 }