容器变换是一种设计方法中的动画模式，主要用于在两个UI元素之间创建一种有意义的、连续的视觉链接。在容器变换过程中，一个UI元素（容器）会在动画过程中改变其大小、形状、颜色和位置，从而变成另一个UI元素。这种转变过程可以帮助用户理解新的UI元素是如何从旧的UI元素中“转变”而来的。容器变换可以用于各种场景，如从列表页到详情页的过渡、从搜索结果到详细信息的过渡等，通过使用容器变换，开发者可以为用户提供一种更连贯、更直观的导航体验。

在小程序 Skyline 中支持了 open-container 组件，这是一个小程序容器转场动画组件，可以帮助开发者在小程序中创建流畅的页面切换效果，提高用户体验。当用户点击open-container组件并跳转到下一个页面时，该组件会自动为其子节点和目标页面提供平滑的过渡效果。

open-container 组件还允许开发者自定义过渡效果的各个参数，如初始和打开状态下的背景色、影深、圆角以及过渡动画的时长和类型。开发者可以根据自己的需求和设计理念来定制的页面切换效果。

接入也十分简单，只需要在原来代码的基础上稍作修改即可～

在 wxml 文件中，创建一个 open-container 组件，并设置了一些自定义属性。然后在 open-container 组件内部放置了一个名为 "card" 的自定义组件，用于展示内容。当用户点击这个组件时，将触发 goDetail 函数。

<!-- page.html -->
<open-container
  closed-elevation="{{closedElevation}}"
  closed-border-radius="{{closedBorderRadius}}"
  open-elevation="{{openElevation}}"
  open-border-radius="{{openBorderRadius}}"
  transition-type="{{type}}"
  transition-duration="{{duration}}"
  bind:tap="goDetail"
>
  <card/>
</open-container>

接着，在 js 文件中，定义 goDetail 函数，它使用 wx.navigateTo 进行页面跳转。

// page.js
Page({
   goDetail() {
    wx.navigateTo({
      url: 'nextPageUrl'
    })
  }
})

通过简单的修改，就可以看到如何使用 open-container 组件为小程序页面间的跳转添加平滑的过渡效果～

除了 open-container 组件之外，Skyline 还提供了丰富的交互动画能力，为开发者提供了更多自定义动画效果的实现可能。通过运用这些功能，开发者可以根据业务需求和品牌形象，打造出独具匠心的动画效果，为用户带来更加愉悦的使用体验。

Skyline 的交互动画能力不仅易于集成和使用，还具备高度的灵活性和可定制性。开发者可以根据实际需求调整动画参数、触发方式和交互逻辑，从而实现更加精准和个性化的动画效果，为你的小程序注入更多的活力和创新元素，为用户带来更加出色的使用体验～

本文案例代码片段：https://developers.weixin.qq.com/s/aJrYDkm974Qy