Javascript 如何使用角度动画或css在ng引导中制作下拉幻灯片动画？

我正在尝试使用角度动画为ng引导的下拉菜单设置动画，虽然动画在开发中工作得很好，但在生产中，当菜单打开时，出于某种原因，它会从下拉菜单的顶部跳到底部。这是我的密码：

动画：

   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>

SASS：

TS:

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

正在研究“仅使用css制作动画的方法”。。。我们必须解决默认的引导类：

• bootstrap中的下拉菜单类，默认情况下保持下拉菜单隐藏
• 显示下拉列表的show类
• 我们必须把这个拿在手中，我们使用了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设置动画的方法”。。。我们必须解决默认的引导类：

• bootstrap中的下拉菜单类，默认情况下保持下拉菜单隐藏
• 显示下拉列表的show类
• 我们必须把这个拿在手中，我们使用了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>

---

使用

普通动画对我来说是可行的，但是使用变换：平移（x，y）会使菜单跳跃。我注意到在我的产品构建中有一个

translate（0px，38px）

作为属性附加，但在我的开发构建中没有。您还为代码添加了翻译。原因是什么？你知道ngbootstrap的代码是从哪里来的吗？如果你在chrome开发者工具中打开默认的引导代码，你会看到“translate（0px，38px）”被放置在下拉切换按钮下方的下拉菜单中正常动画对我来说是可行的，但是使用

transform:translate（x，y）

会使菜单跳跃。我注意到在我的产品构建中有一个

translate（0px，38px）

作为属性附加，但在我的开发构建中没有。您还为代码添加了翻译。原因是什么？如果你在chrome开发者工具中打开默认引导代码，你会看到“translate（0px，38px）”被放置在下拉切换按钮下方的下拉菜单中

dropdownOpenClass = 'dd-closed';

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

<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>

.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; }
}