# Container transition animation

By seamlessly transforming one element into another, you can strengthen the relationship between the two elements, as in the common waterfall flow of clicking a card to jump to the details page.

In order to reduce the development cost, the base library provides container transition animation component to realize the routing effect.

# Effect demonstration

# Methods of Use

Developer tools need to be upgraded to Nightly 1.06.2403222, Base Library Selection 3.4.0

Will need to carry out the excessive elements placed in the <open-container> Inside the component, click <open-container>, when using the navigateTo When you jump to the next page, you transition between its child nodes and 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

{% Minicode ('TMOyD8mB7YOB') %}