如何在组件初始化后更新角度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动画状态

回答

相关问题