如何在Ionic页面路由导航时实现Container Transform共享元素转场

不同技术栈都有对应的成熟实现方案，无需自行从零封装：

• 安卓原生开发：官方Navigation组件原生支持共享元素路由过渡，直接在导航配置里为目标Fragment绑定共享元素参数，即可和路由跳转逻辑联动，无需额外引入第三方库。如果使用Jetpack Compose开发，Navigation Compose 2.4.0及以上版本已内置共享元素过渡API，给前后页对应容器添加相同的共享元素标签、配置过渡参数即可实现效果。
• Flutter开发：官方go_router路由库配合animations组件包里的ContainerTransform组件即可实现，跳转时绑定前后页对应容器的唯一key即可。也可以选用第三方flutter_page_transition库，里面已经封装好了开箱即用的Container Transform路由过渡效果，直接调用对应构造方法传参即可。
• Web前端开发：React生态下搭配react-router和framer-motion库，使用AnimatePresence组件配合元素的layoutId属性即可快速实现。Vue生态下搭配vue-router和vueuse/motion库，或者直接用内置的Transition组件，给前后页对应容器绑定相同的唯一标识、配置对应的缩放过渡参数即可实现。

实现时注意前后页参与过渡的容器需要设置匹配的唯一标识，过渡时长、插值器参数建议对齐Material Design规范，避免过渡效果出现突兀感。

内容的提问来源于stack exchange，提问作者MauriceNino