如何使用 Angular Animations 或使用 css 在 ng-bootstrap 中制作下拉滑动动画？

Question

我正在尝试使用 Angular Animations 为 ng-bootstrap 的下拉菜单设置动画，虽然动画在开发中运行良好，但在生产中，当菜单打开时，它会出于某种原因从下拉菜单的顶部跳到底部。这是我的代码：

动画：

   trigger('openClose', [
        transition('closed => open', [
            style({ opacity: 0, transform: 'translateY(-30px)'}),
            animate('100ms ease-out',
                style({opacity: '*', transform: 'translateY(0)'}))
        ]),
        transition('open => closed', [
            style({ opacity: '*', transform: 'translateY(0)'}),
            animate('100ms ease-out',
                style({opacity: 0, transform: 'translateY(-30px)'}))
        ])
    ])

组件：

<div  ngbDropdown 
      class="d-inline-block w-100">

 <!-- dropdown button -->
 <button class="dropdown-button btn btn-icon-right"
      type="button"
      ngbDropdownToggle>
  <span>
    <span>my title</span>
  </span>
 </button>

 <!-- dropdown menu -->
 <div  ngbDropdownMenu 
      class="dropdown-menu" 
      [@openClose]="isOpen ? 'open' : 'closed'">
  my content
 </div>
</div>

关闭时的动画也不起作用。我试过在:enter 和:leave 和void 上制作动画，它们也不起作用。知道问题可能出在哪里，或者如何正确地为 ngbDropdown 设置动画？有没有办法只使用 css 对其进行动画处理？

解决方案：问题是在生产中由于某种原因下拉菜单使用transform: translateY(0) 设置，而在开发中使用top: 0 设置。因此，要制作滑下动画，您必须在 prod 中使用 top，在 dev 中使用 transform。为了解决这个问题，我不得不用我自己的班级覆盖dropdown-menu。这是一个使用 css 的 hacky 解决方案，直到 ngbootstrap 团队添加动画：

HTML：

<div  ngbDropdown 
      class="dropdown"
      (openChange)="openChange($event)"
      #dropdown>

  <!-- dropdown button -->
  <button class="dropdown-button btn"
          [ngClass]="buttonClass"
          [disabled]="disabled"
          type="button"
          ngbDropdownToggle>
    <span> My Title   </span>
  </button>

  <!-- dropdown menu -->
  <div  ngbDropdownMenu 
        class="dropdown-menu2" // this is important to override the ngb class
        [ngClass]="dropdownOpenClass"
        #dropdownMenu>
    <ng-content></ng-content>
  </div>
</div>

SASS：

.dropdown-menu2 {
    display:block;
    visibility: collapse;
    transition: all .2s ease-in-out;
    top: 0 !important;
    &.dd-closed {
        visibility: hidden;
        opacity: 0;
        transform: translateY(20px) !important; // overwrite prod on closed
    }
    &.dd-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(38px);
    }
}

TS：

dropdownOpenClass = 'dd-closed';

openChange(e: Event) {
    this.isOpen = !this.isOpen;
    this.dropdownOpenClass = this.isOpen ? 'dd-open' : 'dd-closed';
    this.openChanged.emit(e);
}

更新：上述解决方法不适用于 4.1.0+。如果有人有解决方案，请在下面发布。

Answer 1

正在研究“一种仅使用 css 对其进行动画处理的方法”...我们必须解决默认引导类：

• bootstrap 中的下拉菜单类，默认情况下隐藏下拉菜单
• 显示下拉菜单的显示类
• 我们必须把它掌握在自己的手中，我们使用 ngStyle 做到了这一点
• 我们还创建了用于慢速显示和慢速隐藏的类...为了切换这些，我们创建了一个变量并使用了 ngClass
• 要调整持续时间效果，您可以更改这些类以获得您想要的确切效果

HTML

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="dropDownClicked()">Toggle dropdown</button>
  <div 
  [ngStyle]="ddStyling? {'display': 'block'} : {'display': 'block'}"
  [ngClass]='ddStatus' ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

CSS

.ddOpened{
  background:lightpink;
  animation: myOpenMove 1s ease-in;
}

@keyframes myOpenMove {
  0% {  visibility:hidden; opacity: 0; }
  100% { visibility:visible; opacity: 1; }
}

.ddClosed{
  background:lightpink;
  animation: myCloseMove 1s ease-in;
  transform: translate(0px, 38px);
  visibility:hidden;
}

@keyframes myCloseMove {
  0% { opacity: 1 !important; visibility: visible; }
  100% {  height:1px; opacity: 0; visibility:hidden; }
}

工作demo on stackblitz here