share-element

基础库 2.16.0 开始支持,低版本需做兼容处理

共享元素。

共享元素是一种动画形式,类似于 flutter Hero动画,表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。

使用时需在当前页放置 share-element 组件,同时在 page-container 容器中放置对应的 share-element 组件,对应关系通过属性值 key 映射。当设置 page-container 显示时,transform 属性为 true 的共享元素会产生动画。当前页面容器退出时,会产生返回动画。

属性 类型 默认值 必填 说明 最低版本
key string 映射标记 2.16.0
transform boolean false 是否进行动画 2.16.0
duration number 300 动画时长,单位毫秒 2.16.0
easing-function string ease-out css缓动函数 2.16.0

示例代码

在开发者工具中预览效果