layui/example/docs/zh-CN/components/animation.md
2022-02-06 03:19:24 +08:00

216 lines
5.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

::: anchor
:::
::: title 基本介绍
:::
::: describe 在实用价值的前提之下,我们并没有内置过多花俏的动画。
:::
::: title 基础使用
:::
::: demo
<template>
<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="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>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
<style>
.site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.site-doc-icon li .doc-icon-name,
.site-doc-icon li .doc-icon-code {
color: #c2c2c2;
}
.site-doc-icon li .doc-icon-fontclass {
height: 40px;
line-height: 20px;
padding: 0 5px;
font-size: 13px;
color: #333;
}
.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 0.3s;
-webkit-transition: all 0.3s;
}
.site-doc-icon li .layui-icon {
display: inline-block;
font-size: 32px;
}
.site-doc-color {
margin: 15px 0;
}
.site-doc-necolor li div {
border-radius: 0;
color: #000 !important;
}
.site-doc-color li div {
padding: 20px 10px;
color: #fff;
text-align: center;
line-height: 1.6;
font-size: 14px;
}
.site-doc-bgcolor li {
padding: 20px 10px;
}
.anim .site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.anim .site-doc-icon li {
width: 50%;
}
.anim .site-doc-anim li {
height: auto;
}
.anim .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 0.3s;
-webkit-transition: all 0.3s;
}
.anim .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%;
}
.anim .site-doc-icon li .code {
white-space: nowrap;
}
</style>
:::
::: title 动画类名
:::
::: table
| 类名 | 描述 | 使用 |
| --------------------------------- | ------------ | ---------------------------------------------- |
| 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` |
:::
::: comment
:::
::: previousNext animation
:::