Apply angular animations to a component

Question

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?

Antoniossss · Accepted Answer · 2018-09-12 11:51:51Z

2

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.

answered Sep 12, 2018 at 11:51

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Apply angular animations to a component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related