快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

动画 Animation

概述

基础组件,触发业务逻辑时使用。

基础动画

基础动画是由CSS3进行构造,需要使用时,请对应项目的容器上添加所需动画对应的class。以下按钮名称即为class参数。

不同速度

JUI默认提供3种不同速度:默认速度(.5s)、快速(.3s)、慢速(.8s)。

参数说明:快速 j-is-fast、慢速 j-is-slow

用法和示例:按所需速度添加对应类class

如,所需动画从底部滑出slide-bottom
1,默认速度的Slide-bottom:j-animation-slide-bottom
2,快速的Slide-bottom:j-animation-slide-bottomj-is-fast
3,慢速的Slide-bottom:j-animation-slide-bottomj-is-slow
进场方式

淡入淡出

摇晃

缩放:由小到大

缩放:由大到小

滑出:由上至中

滑出:由下至中

滑出:由左至中

滑出:由右至中

加速曲线

用法:设置类j-*来定义加速曲线。*为加速曲线值,包含5种:j-linearj-easej-ease-inj-ease-outj-ease-in-out

默认加速时间为.5s。

底色滤镜

用法:设置类j-gif-**为色值,包含2种:blackwhite

控制黑色底色gif,采用了CSS混合模式mix-blend-mode。对应表:

Class Value
j-gif-black mix-blend-mode: screen
j-gif-white mix-blend-mode: multiply
上一章:模态框 Modal
下一章:问题反馈
提示
class