# Container turn animation

By seamlessly converting one element to another, the relationship between the two elements can be strengthened, as in the common waterfall stream where you click a card to jump to the details page.

To reduce development costs, the foundation library provides a container transition animation component to achieve this routing effect.

# Effects demonstration

# How to use it

Developer tools need to be upgraded toNightly``1.06.2403222,Base library selection3.4.0

Place the elements that need to be overloaded in the ['((component / open-container)) component, click [``]((component/open-container))，When usingnavigateTo 'to jump to the next page, transition its child node to the next page.

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

# Component properties

# Sample code snippet

Preview with Developer Tool