• 窗口动画
    • API
    • 组件
    • pages.json

    窗口动画

    本API仅App端支持。小程序自身不支持自定义动画。H5的窗体动画可使用常规单页动画处理方案，见H5下单页动画示例

    窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json。

    API

    有效的路由 API

    • navigateTo
    • navigateBack
    1. uni.navigateTo({
    2.     url: '../test/test',
    3.     animationType: 'pop-in',
    4.     animationDuration: 200
    5. });
    6. uni.navigateBack({
    7.     delta: 1,
    8.     animationType: 'pop-out',
    9.     animationDuration: 200
    10. });

    组件

    open-type 有效值

    • navigateTo
    • navigateBack
    1. <navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
    2. <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

    pages.json

    pages.json 中配置的是窗口显示的动画

    1. "style": {
    2.     "app-plus": {
    3.         "animationType": "fade-in",
    4.         "animationDuration": 300
    5.     }
    6. }

    显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

    显示动画关闭动画显示动画描述（关闭动画与之相反）
    slide-in-rightslide-out-right新窗体从右侧进入
    slide-in-leftslide-out-left新窗体从左侧进入
    slide-in-topslide-out-top新窗体从顶部进入
    slide-in-bottomslide-out-bottom新窗体从底部进入
    fade-infade-out新窗体从透明到不透明逐渐显示
    zoom-outzoom-in新窗体从小到大缩放显示
    zoom-fade-outzoom-fade-in新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
    pop-inpop-out新窗体从左侧进入，且老窗体被挤压而出
    nonenone无动画

    详细的窗口动画说明，请参考：

    • 窗口显示的动画：AnimationTypeShow

    • 窗口关闭的动画：AnimationTypeClose参考事项

    • 页面路由拦截和管理，插件市场有很多封装好的工具类，搜索路由

    发现错误？想参与编辑？在 GitHub 上编辑此页面！