share-element

组件类型：UniShareElement

共享元素

共享元素组件，用于页面转场动画。指A、B 2个页面之间在动画时共享某个组件，这个组件在转场动画中通过特殊的动画从A页面的位置移动到B页面的位置。

常见场景有：

1. 商品列表的商品缩略图，点击进入商品详情页面时，把缩略图变成共享元素，放大到详情页面的新位置。
2. 相册应用，点击缩略图，先放大到详情页的大图位置，然后后台加载大图，完毕后再显示大图。
3. 视觉上跨页面一直显示的一个组件，比如播放条、悬浮球。

在hello uni-app x中，组件->视图容器下有共享元素示例，在模板->列表到详情 中也提供了演示。

注意共享元素组件仅指的是动画的视觉共享，并不是2个页面真的复用了同一个组件实例，不同页面的组件仍然是各自单独的实例。

兼容性

Web	微信小程序	Android	iOS
x	x	4.51	4.51

属性

名称	类型	默认值	兼容性	描述
share-key	string	-	Web 微信小程序 Android iOS x x 4.51 4.51	映射标记，页面内唯一
easing-function	string	"ease-out"	Web 微信小程序 Android iOS x x 4.51 4.51	css缓动函数
合法值 兼容性 描述 ease Web 微信小程序 Android iOS x x 4.51 4.51 表示过渡效果开始缓慢，然后逐渐加速，最后减速结束。这是大多数情况下的推荐值，因为它创建了平滑的过渡效果 ease-out Web 微信小程序 Android iOS x x 4.51 4.51 过渡开始时较快，然后逐渐减速。这会在过渡末尾创建一个缓慢的效果 ease-in Web 微信小程序 Android iOS x x 4.51 4.51 过渡开始时较慢，然后逐渐加速。这会在过渡初期创建一个缓慢的效果 ease-in-out Web 微信小程序 Android iOS x x 4.51 4.51 过渡开始时较慢，然后加速，最后减速。这是一个结合了ease-in和ease-out的时间函数，产生平滑的过渡效果 linear Web 微信小程序 Android iOS x x 4.51 4.51 过渡效果是线性的，速度保持恒定，没有加速或减速。这会在整个过渡期间保持相同的速度 cubic-bezier Web 微信小程序 Android iOS x x 4.51 4.51 用于自定义 CSS 过渡（transition）的时间函数的函数，它允许你精确地定义过渡效果的速度变化
shuttle-on-push	string	"to"	Web 微信小程序 Android iOS x x 4.51 4.51	指定 push 阶段的飞跃物
合法值 兼容性 描述 from Web 微信小程序 Android iOS x x x 4.51 push 阶段采用源页面节点作为飞跃物 to Web 微信小程序 Android iOS x x 4.51 4.51 push 阶段采用目标页面节点作为飞跃物
shuttle-on-pop	string	"to"	Web 微信小程序 Android iOS x x 4.51 4.51	指定 pop 阶段的飞跃物
合法值 兼容性 描述 from Web 微信小程序 Android iOS x x 4.51 4.51 pop 阶段采用源页面节点作为飞跃物 to Web 微信小程序 Android iOS x x x 4.51 pop 阶段采用目标页面节点作为飞跃物
transition-on-gesture	boolean	false	Web 微信小程序 Android iOS x x x 4.51	手势返回时是否进行动画

子组件

支持所有组件

参见

• 相关 Bug
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档