Блог

Я создал выпадающий список с помощью начальной загрузки ngx. В выпадающем списке я хочу добавить пользовательскую анимацию. Я создал анимацию, используя библиотеку анимации angular, и добавил ее в выпадающий список. Но это не работает.

Вопрос — как я могу добавить пользовательскую анимацию в выпадающий список начальной загрузки?

Это то, что я сделал —

Компонентный HTML —

 <div class="btn-group" dropdown>
   <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria- 
   controls="dropdown-basic">
        Button dropdown <span class="caret"></span>
   </button>
   <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic" 
   [@dropdownAnimation]>
        <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
        <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
   </ul>
</div> 
  

Component ts —

 animations: [
trigger("dropdownAnimation", [
  transition(":enter", [
    style({
      transform: "translate(0, -40px)",
      opacity: 0,
      visibility: "hidden",
    }),
    animate(
      "400ms ease-in-out",
      style({ transform: "translate(0, 0)", opacity: 1, visibility: "visible" })
    ),
  ]),
  transition(":leave", [
    style({ transform: "translate(0, 0)", opacity: 1, visibility: "visible" }),
    animate(
      "400ms ease-in-out",
      style({
        transform: "translate(0, -40px)",
        opacity: 0,
        visibility: "hidden",
      })
    ),
  ]),
])
] 
  

Добавить BsDropdownModule в app.module.ts

 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
    
    @NgModule({
      imports: [BsDropdownModule.forRoot(),...]
    })
    export class AppModule(){}