pagecontainer

page-container是一个组件，用于在页面中显示弹窗或子页面。它可以通过设置position属性来控制弹出的位置，可以是top、bottom、right或center。当从底部或顶部弹出时，page-container的形态是一个半屏弹窗；当从右侧或中间显示时，page-container的形态是一个全屏的子页面。\[1\]

在使用page-container时，可以同时在页面中和page-container中放置share-element元素。这两个对应的share-element通过属性值key来实现对应关系。当page-container显示时，共享元素会产生从页面中的位置穿梭到page-container中的动画；当page-container关闭时，共享元素也会产生返回动画。\[2\]

共享元素是一种动画形式，类似于flutter中的Hero动画。它表现为元素在页面间穿越的效果。在使用共享元素时，需要将share-element组件放置在当前页中，并在page-container容器中放置对应的share-element组件，通过属性值key来映射它们的对应关系。当设置page-container显示时，设置transform属性为true的共享元素会产生动画效果。当当前页面容器退出时，也会产生返回动画效果。\[3\]
#### 引用[.reference_title]
- *1* *2* [微信小程序开发（八）：page-container弹窗与share-element动画](https://blog.csdn.net/Dominic_W/article/details/124064926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [微信小程序共享元素+ page-container假页实现弹出效果](https://blog.csdn.net/qq_48085286/article/details/124618299)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]