OpenContainer
容器转场动画组件 点击 OpenContainer 组件,当使用 wx.navigateTo 跳转下一页面时,对其子节点和下一个页面进行过渡。 下个页面从 OpenContainer 所在位置大小渐显放大,同时 OpenContainer 内容渐隐,过渡效果包含背景色、圆角和阴影。 源页面 OpenContainer 为 closed 状态,转场动画后为 open 状态。
支持情况:
类型
ComponentType<OpenContainerProps>
OpenContainerProps
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
transitionType | "fade" or "fadeThrough" | "fade"<br /><br />可选值:<br />- fade: 将传入元素淡入传出元素之上<br />- fadeThrough: 首先淡出传出元素,并在传出元素完全淡出后开始淡入传入元素 | 动画类型 |
transitionDuration | number | 300 | 动画时长 |
closedColor | string | "white" | 初始容器背景色 |
closedElevation | number | 0 | 初始容器影深大小 |
closeBorderRadius | number | 0 | 初始容器圆角大小 |
middleColor | string | "" | fadeThrough 模式下的过渡背景色 |
openColor | string | "white" | 打开状态下容器背景色 |
openElevation | number | 0 | 打开状态下容器影深大小 |
openBorderRadius | number | 0 | 打开状态下容器圆角大小 |
API 支持度
API | 微信小程序 | H5 | React Native | Harmony |
---|---|---|---|---|
OpenContainerProps.transitionType | ✔️ | |||
OpenContainerProps.transitionDuration | ✔️ | |||
OpenContainerProps.closedColor | ✔️ | |||
OpenContainerProps.closedElevation | ✔️ | |||
OpenContainerProps.closeBorderRadius | ✔️ | |||
OpenContainerProps.middleColor | ✔️ | |||
OpenContainerProps.openColor | ✔️ | |||
OpenContainerProps.openElevation | ✔️ | |||
OpenContainerProps.openBorderRadius | ✔️ |