Question

我有一个简单的下拉组件，我想要动画。问题在于，尽管控制动画状态的变量以“非活动”值开始，但是当组件加载时我的下拉列表仍然出现，并且在我将鼠标悬停在其上之后仅获取正确的值。我不能在我的样式文件中放置零高度和填充，因为我使用'*'在我的动画中使用基值引用。我已经尝试在ngOnInit方法中使用ChangeDetectorRef。

<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'))
        ])

Answer 1

如果我理解你的问题，你可以使用css display属性：

 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

Answer 2

对不起，这只是我最初动画状态的一个错字。它发生在12小时的非停止编码之后。

如何在组件初始化后更新角度2动画状态

2 个答案: