CODEWITHSUNDEEP
angularangular-animations
Slicc
Slicc

Reputation: 3445

Apply angular animations to a component

I have an angular 6 page that contains three angular components as such:

<component1 [@componentState]="componentToShow === 0 ? 'active' : 'inactive'"></component1>
<component2 [@componentState]="componentToShow === 1 ? 'active' : 'inactive'"></component2>
<component3 [@componentState]="componentToShow === 2 ? 'active' : 'inactive'"></component3>

I want to apply an animation such that when I set the componentToShow value, the component will animate in or out. To this end I created an angular animation like below:

animations: [
        trigger('componentState', [
            state('inactive', style({
                backgroundColor: '#eee',
                transform: 'scale(1)'
            })),
            state('active', style({
                backgroundColor: '#cfd8dc',
                transform: 'scale(1.1)'
            })),
            transition('inactive => active', animate('100ms ease-in')),
            transition('active => inactive', animate('100ms ease-out'))
        ])
    ]

When I change the componentToShow value to 0, 1 or 2 I can see that the component does get the scale and backgroundColor applied by examining the elements in the chrome dev tools, but there is no visible change to the component in the browser itself.

All the examples I see are of applying angular animations to standard HTML elements (div, buttons etc...), nothing where the state change is applied to an instance of an angular component.

Can someone tell me what I need to do to get this animation working?

Upvotes: 1

Views: 1551

Answers (1)

Antoniossss
Antoniossss

Reputation: 32535

Most probably its because custom HTML elements are inline, while you need blocks.

add this to your component css:

:host{
    display:block;
}

or add rule CSS rule on current view (current page) to make componentX blocks.

Since you are using firebug or other tool, you can test that live by adding display:block; to any of those components.

Upvotes: 2

Related Questions