#鸿蒙通关秘籍#如何通过transition和属性动画在同一页面内实现一镜到底效果？

对于同一页面内的元素，可以通过组合使用transition和属性动画实现一镜到底效果。包括对容器展开前后的布局定义，并为消失或出现的组件配置动画。

@Component
export struct MyExtendView {
  @Link isExpand: boolean;
  @State cardList: Array<CardData> = xxxx;

  build() {
    List() {
      if (this.isExpand) {
        Text('expand')
          .transition(TransitionEffect.translate({y:300}).animation({ curve: curves.springMotion(0.6, 0.8) }))
      }

      ForEach(this.cardList, (item: CradData) => {
        MyCard({ 'cardData': item })
      })
    }
    .width(this.isExpand ? 200 : 500)
    .animation({ curve: curves.springMotion() })
  }
}

List() {
  if (!this.isExpand) {
    Text('收起')
      .transition(TransitionEffect.translate({y:300}).animation({ curve: curves.springMotion(0.6, 0.9) }))
  }

  MyExtendView({ 'isExpand': this.isExpand })
    .onClick(() => { this.isExpand = !this.isExpand; })

  if (this.isExpand) {
    Text('展开')
      .transition(TransitionEffect.translate({y:300}).animation({ curve: curves.springMotion() }))
  }
}