如何在組件初始化後更新角度2動畫狀態

我有一個簡單的下拉組件，我想要動畫。問題是，儘管控制動畫狀態的變量以「非活動」值開始，並且在組件加載時仍然出現下拉列表，並且在將鼠標懸停在其上時只顯示正確的值。我無法將零高度和填充放置在我的樣式文件中，因爲我在使用'*'的動畫中使用了基本值引用。我已經嘗試在我的ngOnInit方法中使用ChangeDetectorRef。如何在組件初始化後更新角度2動畫狀態

<li (mouseenter)="showServicesSubMenu()" 
        (mouseleave)="hideServicesSubMenu()"> 
        <a class="nav-link user-menu-item" 
         [@servicesLinkShadowState]="servicesLinkState" 
         href="javascript:void(0)" 
         id="services-menu-item" 
         routerLinkActive="active-menu active-services" 
         routerLink="services" 
         jhiTranslate="global.menu.services.main"> 
         Послуги 
        </a> 
        <ul> 
         <li class="service-sub-menu" 
          *ngFor="let childNode of servicesOptions" 
          [@submenuDropdown]="servicesLinkState"> 
          <a [routerLink]="childNode.href" 
           [jhiTranslate]="childNode.translateVar"> 
           {{childNode.name}} 
          </a> 
         </li> 
        </ul> 
       </li> 

trigger('submenuDropdown',[ 
      state('active', style({height:'*', padding:'10px', borderBottom: '2px solid #b90062'})), 
      state('inactive', style({height:'0', padding:0, borderBottom:'0px solid #b90062'})), 
      transition('active<=>inactive', animate('250ms')) 
     ])

來源

2017-04-10 Dmitrij Kostyushko

如果我明白你的問題，你可以只使用CSS顯示屬性：

trigger('submenuDropdown',[ 
      state('active', style({height:'100%', padding:'10px', borderBottom: '2px solid #b90062',display:'block'})), 
      state('inactive', style({height:'0', padding:0, borderBottom:'0px solid #b90062',display:'none'})), 
      transition('active<=>inactive', animate('250ms')) 
     ])]

我創建plunker這一點。請看看：https://plnkr.co/edit/Y0QWi6h4WmrNmA1LOHWq?p=preview

來源

2017-04-11 06:42:57 Amir

對不起，這只是我初始狀態動畫的一個錯字。它發生在12個小時的非停止編碼之後。

來源

2017-04-11 07:42:39

如何在組件初始化後更新角度2動畫狀態

回答

相關問題