fs-weapp/transition

Transition 动画

使用指南

在 app.json 或 index.json 中引入transition组件

{
  "usingComponents": {
    "fs-transition": "path/components/transition/index"
  }
}
1
2
3
4
5

代码演示

基础用法

可在标签内使用插槽功能自定义内容，当元素显示和隐藏是会自动加上enter和leave，触发动画

<fs-transition
  show="{{ show }}"
  name="{{ name }}"
  custom-class="block">
  你好啊
</fs-transition>
1
2
3
4
5
6

动画类型

<fs-transition name="fade-up" />
1

属性

参数 说明 类型 默认值
name 动画类型 String fade
show 是否展示组件 Boolean true
duration 后动画时长，单位为毫秒 Number 300
custom-style 自定义样式 String -
custom-class 自定义的外部样式类 String -

动画类型

类型 说明
fade 淡入
fade-up 上滑淡入
fade-down 下滑淡入
fade-left 左滑淡入
fade-right 右滑淡入
slide-up 上滑进入
slide-down 下滑进入
slide-right 右滑进入
slide-left 左滑进入
scale 缩放

插槽

名称 说明
- 默认插槽

← Checkbox选择框 →