layui/example/docs/zh-CN/components/animation.md

::: anchor :::

::: title 基本介绍 :::

::: describe 在实用价值的前提之下，我们并没有内置过多花俏的动画。 :::

::: title 基础使用 :::

::: demo

• 顶部往下滑入
  layui-anim-down
• 微微往下滑入
  layui-anim-downbit
• 底部往上滑入
  layui-anim-up
• 微微往上滑入
  layui-anim-upbit
• 平滑放大
  layui-anim-scale
• 弹簧式放大
  layui-anim-scaleSpring
• 平滑放小
  layui-anim-scalesmall
• 弹簧式放小
  layui-anim-scalesmall-spring
• 渐现
  layui-anim-fadein
• 渐隐
  layui-anim-fadeout
• 360度旋转
  layui-anim-rotate
• 循环动画
  追加：layui-anim-loop

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