分类： 容器转场动画

通过将一个元素无缝地转换为另一个元素，可以加强两个元素间的关系，比如常见的瀑布流中点击卡片跳转到详情页。

为了降低开发成本，基础库提供了容器转场动画组件来实现这个路由效果。

效果演示

使用方法

开发者工具需要升级到 Nightly 1.06.2403222，基础库选择 3.4.0

将要进行过渡的元素放在 <open-container> 组件内，点击 <open-container>，当使用 navigateTo 跳转到下一个页面时，会对它的子节点和下一个页面进行过渡。

<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>

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

组件属性

示例代码片段

在开发者工具中预览效果