theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs): animation 文档点击播放动画

Browse Source
This commit is contained in:
sight 2022-04-01 00:45:56 +08:00
parent 06ac16fe5a
commit b61cf45735
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
example/docs/zh-CN/components/animation.md
View File

@ -16,51 +16,51 @@
<div class="anim"> <div class="anim">
<ul class="layui-border-box site-doc-icon site-doc-anim"> <ul class="layui-border-box site-doc-icon site-doc-anim">
<li style="height:auto"> <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> <div class="code">layui-anim-down</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-downbit</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-up</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-upbit</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-scale</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-scaleSpring</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-scalesmall</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-scalesmall-spring</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-fadein</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-fadeout</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">layui-anim-rotate</div>
</li> </li>
<li style="height:auto"> <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> <div class="code">追加：layui-anim-loop</div>
</li> </li>
</ul> </ul>
@ -72,7 +72,16 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const playAnimation = (e) => {
const el = e.currentTarget;
const targetClass = el.classList[1];
el.classList.remove(targetClass);
setTimeout(() => {
el.classList.add(targetClass);
},100)
}
return { return {
playAnimation
} }
} }
} }