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

[文档] 新增 anim 文档

Browse Source
This commit is contained in:
就眠仪式 2021-10-08 01:08:58 +08:00
parent 98beb7c23c
commit 7f638bf307
2 changed files with 113 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/docs/zh-CN/components/animation.md
View File

@ -1,6 +1,56 @@
::: demo
<template>
<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="code">layui-anim-down</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-downbit">微微往下滑入</div>
<div class="code">layui-anim-downbit</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-up">底部往上滑入</div>
<div class="code">layui-anim-up</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-upbit">微微往上滑入</div>
<div class="code">layui-anim-upbit</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scale">平滑放大</div>
<div class="code">layui-anim-scale</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scaleSpring">弹簧式放大</div>
<div class="code">layui-anim-scaleSpring</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scalesmall">平滑放小</div>
<div class="code">layui-anim-scalesmall</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-scalesmall-spring">弹簧式放小</div>
<div class="code">layui-anim-scalesmall-spring</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-fadein">渐现</div>
<div class="code">layui-anim-fadein</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-fadeout">渐隐</div>
<div class="code">layui-anim-fadeout</div>
</li>
<li style="height:auto">
<div class="layui-anim layui-anim-rotate">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="code">追加：layui-anim-loop</div>
</li>
</ul>
</template>
<script>
@ -17,4 +67,19 @@ export default {
<style>
</style>
:::
:::
| | | |
|--|--|--|
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
| layui-anim-scalesmall | 平滑放小 |`layui-anim layui-anim-scalesmall`|
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring`|
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein`|
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout`|
| layui-anim-rotate | 360度旋转 | `layui-anim layui-anim-rotate`|
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop`|

47
docs/src/styles/markdown.css
View File

@ -228,6 +228,7 @@ table td {
padding: 25px;
line-height: 24px;
border: 1px solid #d2d2d2;
border-radius: 6px;
}
.site-idea .layui-field-title {
@ -238,4 +239,50 @@ table td {
margin: 0 20px 20px 0;
padding: 0 20px;
text-align: center;
}
.site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.site-doc-icon li {
width: 50%;
}
.site-doc-anim li {
height: auto;
}
.site-doc-icon li {
display: inline-block;
vertical-align: middle;
width: 16.5%;
height: 105px;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all .3s;
-webkit-transition: all .3s;
}
.site-doc-icon li .layui-anim {
width: 125px;
height: 125px;
line-height: 125px;
margin: 0 auto 10px;
text-align: center;
background-color: #009688;
cursor: pointer;
color: #fff;
border-radius: 50%;
}
.site-doc-icon li .code {
white-space: nowrap;
}