open-container容器转场动画组件

追格_咖小啡/ 08月09日/ 小程序/ 浏览 728

open-container为微信小程序容器转场动画组件。


点击 <open-container> 组件,当使用 wx.navigateTo 跳转下一页面时,对其子节点和下一个页面进行过渡。


下个页面从 <open-container> 所在位置大小渐显放大,同时 <open-container> 内容渐隐,过渡效果包含背景色、圆角和阴影。


源页面 <open-container> 为 closed 状态,转场动画后为 open 状态。


示例代码:


<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'
    })
  }
})


发表评论

暂无评论,抢个沙发...

客服 工单