CODEWITHSUNDEEP
angularanimationangular2-animation
Dmitrij Kostyushko
Dmitrij Kostyushko

Reputation: 656

How to update the angular 2 animation status after component init

I have a simple dropdown component that i want to animate. The problem is that despite the fact that the variable that controls animation state starts with the value "inactive" and my dropdown still appears when the component loads and only takes correct value after I hover the mouse over it. I cannot put zero height and padding in my styles file as i use the base value reference in my animation with '*'. And i have already tried to use the ChangeDetectorRef in my ngOnInit method. 

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

Upvotes: 0

Views: 538

Answers (2)

Dmitrij Kostyushko
Dmitrij Kostyushko

Reputation: 656

Sorry, it was just a typo in my initial state of animation. It happens after 12 hrs of non stop coding.

Upvotes: 0

Amir
Amir

Reputation: 2022

If i understand your question,You can just use the css display property:

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

I have created plunker for this. Please have a look:https://plnkr.co/edit/Y0QWi6h4WmrNmA1LOHWq?p=preview

Upvotes: 1

Related Questions