0

我有一个简单的下拉组件，我想制作动画。问题是，尽管控制动画状态的变量以值“inactive”开始，并且当组件加载时我的下拉菜单仍然出现，并且只有在我将鼠标悬停在它上面时才会采用正确的值。我无法在样式文件中放置零高度和填充，因为我在动画中使用带有“*”的基值引用。而且我已经尝试在我的 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'))
        ])
4

2 回答 2

1

如果我理解您的问题，您可以使用 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-11T06:42:57.580 回答
0

抱歉，这只是我最初动画状态的一个错字。它发生在 12 小时不间断编码之后。

于 2017-04-11T07:42:39.137 回答