layui/example/docs/zh-CN/components/animation.md
2022-02-08 20:23:22 +08:00

3.9 KiB
Raw Blame History

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

:::

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