如何为Angular的ng-select仅下拉面板添加加载动画

问题原因 #

你当前通过@HostBinding('@myAnimationTrigger')将动画绑定到了组件宿主元素上，导致整个组件（包括输入框和下拉面板）都会触发动画。要实现仅下拉面板应用动画，需要将动画触发器直接绑定到下拉面板的容器上，而非组件宿主。

修改步骤 #

1. 移除组件宿主的动画绑定
   在组件类中删除@HostBinding('@myAnimationTrigger') myAnimation = true;这一行，避免动画作用于整个组件。

2. 定制下拉面板模板并绑定动画
   在ng-select内部添加#dropdownPanel模板，将动画触发器绑定到下拉面板的容器div上，同时保留你原来的选项模板。

修改后的代码 #

组件类（.ts）

@Component({
  selector: 'app-branch',
  templateUrl: './branch.component.html',
  styleUrls: ['./branch.component.scss'],
  animations: [
    trigger('myAnimationTrigger', [
      state('void', style({ opacity: 0 })),
      transition(':enter', [
        animate('1s ease-in-out', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('0.5s ease-in-out', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class BranchComponent implements OnInit {
  // 移除了@HostBinding相关代码
  selectedBranch: any;
  branches: any[] = [];

  ngOnInit() {
    // 初始化branches数据逻辑
  }

  branchClear() {
    // 分支清除逻辑
  }
}

HTML模板

<div>
  <ng-select
    [items]="branches"
    (change)="branchClear()"
    bindLabel="name"
    autofocus
    placeholder="select branch"
    [(ngModel)]="selectedBranch">
    <!-- 自定义下拉面板容器，绑定动画触发器 -->
    <ng-template #dropdownPanel let-items>
      <div [@myAnimationTrigger] class="ng-dropdown-panel">
        <ng-select-items [items]="items" [itemTemplate]="optionTemplate"></ng-select-items>
      </div>
    </ng-template>

    <!-- 原选项模板 -->
    <ng-template #optionTemplate let-item="item">
      <div class="option">
        <div class="option-details">
          {{item.name}}
        </div>
      </div>
    </ng-template>
  </ng-select>
</div>

说明 #

• 通过#dropdownPanel模板定制ng-select的下拉面板容器，将动画触发器[@myAnimationTrigger]绑定到这个容器div上，确保动画仅作用于下拉面板。
• 拆分了进入和离开的动画过渡逻辑，你可以根据需求自行调整动画时长、透明度或添加位移等效果。

内容的提问来源于stack exchange，提问作者Nipuna Hettiwatta