Nouveau Papier Mâché

    @doraemon-ui/miniprogram.animation-group
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1-alpha.1 • Public • Published

    AnimationGroup 动画组

    将自定义的组件包裹在 animation-group 组件内,可以实现过渡/动画效果,预设 9 种过渡效果 fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, slideInUp, slideInDown, slideInLeft, slideInRight, zoom, punch 可选用。

    在进入/离开的过渡中,会有 6 个 class 切换:

    • -enter: 进入过渡的开始状态,在过渡过程完成之后移除
    • -enter-active: 进入过渡的结束状态,在过渡过程完成之后移除
    • -enter-done: 进入过渡的完成状态
    • -exit: 离开过渡的开始状态,在过渡过程完成之后移除
    • -exit-active: 离开过渡的结束状态,在过渡过程完成之后移除
    • -exit-done: 离开过渡的完成状态

    使用指南

    在 page.json 中引入组件

    json

    示例代码

    在开发者工具中预览效果

    WXML

    wxml

    JAVASCRIPT

    js

    WXSS

    wxss

    API

    AnimationGroup props

    参数 类型 描述 默认值
    in boolean 触发组件进入或离开过渡的状态 false
    classNames any 过渡的类名 -
    duration any 过渡持续时间 -
    type string 过渡动效的类型 transition
    appear boolean 首次挂载时是否触发进入过渡 false
    enter boolean 是否启用进入过渡 true
    exit boolean 是否启用离开过渡 true
    mountOnEnter boolean 首次进入过渡时是否懒挂载组件 true
    unmountOnExit boolean 离开过渡完成时是否卸载组件 true
    wrapCls string 自定义类名 -
    wrapStyle string,object 自定义样式 -
    disableScroll boolean 阻止移动触摸 false
    bind:click function 点击组件时触发的回调函数 -
    bind:enter function 进入过渡的开始状态时触发的回调函数 -
    bind:entering function 进入过渡的结束状态时触发的回调函数 -
    bind:entered function 进入过渡的完成状态时触发的回调函数 -
    bind:exit function 离开过渡的开始状态时触发的回调函数 -
    bind:exiting function 离开过渡的结束状态时触发的回调函数 -
    bind:exited function 离开过渡的完成状态时触发的回调函数 -
    bind:change function 监听状态变化的回调函数 -

    AnimationGroup slot

    名称 描述
    - 自定义内容

    AnimationGroup externalClasses

    名称 描述
    dora-class 根节点样式类

    Install

    npm i @doraemon-ui/miniprogram.animation-group

    DownloadsWeekly Downloads

    10

    Version

    0.0.1-alpha.1

    License

    MIT

    Unpacked Size

    395 kB

    Total Files

    104

    Last publish

    Collaborators

    • sunnie1992
    • skyvow