如何创建一个从顶部滑入并平滑地将组件向下推入组件的组件

问：

我正在尝试使用环形动画创建多步骤动画。但我就是无法让主动画正常工作。

我有一个包含 2 个组件的侧面板，当在 lsit 组件上单击卡片时，标题应从屏幕顶部滑入并平滑地向下推送列表。

反之亦然，当通过再次单击卡片来删除标题时，它应该滑出屏幕，并且列表应该随着它顺利向上移动。

如果有人能向我指出为什么动画没有按预期工作，将不胜感激。

sidenav.component.html：

<div class="side-panel">

  <app-header-bar [@trigger_animation]="header_state"></app-header-bar>

  <app-list (addHeader)="onAddHeader()"></app-list> 

</div>

sidenav.component.scss：

.side-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: fit-content; /* Adjust the width based on content */
  max-width: 100%; /* Optional: to ensure it doesn't overflow the parent */

  height: 100vh;
  background-color: #d4d4c4;

  padding-left: 20px;// make an inner spacing from the left edges
  padding-right: 20px;
  overflow-y: scroll;
  @extend .hide-all-scrollbars;
}

sidenav.component.ts：

@Component({
  selector: 'app-sidenav',
  standalone: true,
  imports: [CommonModule, ListComponent, HeaderBarComponent],
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss'],
  animations: [
    extended_animation
  ]
})
export class SideNavComponent {
  header_state: string = 'hidden';

  onAddHeader(): void {
    this.header_state = this.header_state === 'showing' ? 'hidden' : 'showing';
    console.log(this.header_state);
  }
}

extended_animation.ts：

export const extended_animation = trigger('trigger_animation', [


  state('hidden', style({
    transform: 'translateY(-100%)', // Slide out
    height: '0', // Collapse height
    padding: 0, // Collapse padding if needed
  })),

  state('showing', style({
    transform: 'translateY(0)', // Slide in
    height: '100px', // Expand height
    padding: '*', // Restore padding
  })),

  // Transition for both showing and hiding
  transition('* <=> *', animate('1000ms ease-in-out'))
]);

标题栏的容器

.header-container{
  display: flex;

  justify-content: center; //center text horizontally
  align-items: center; //center text vertically

  color: white;

  margin-left: -20px; // Negative margin equal to the side panel's padding   (we set padding on sidenav to 20px
  margin-right: -20px; // Same as above for the right side
  width: calc(100% + 40px); // Compensate for the negative margins on both sides do the head will have the full with beyond the padding

  background-color: #800080;

  height: 100px;

  box-sizing: border-box; // Include padding and border in the element's width
}