Multiple Animation Triggers In Angular2 Component

I would like to define multiple animation triggers in one component. Is this possible? For example one for entering the scene and one for hover. Or do I need to define two compone

Solution 1:

I would like to define multiple animation triggers in one component. Is this possible?

Yes you can have as many triggers as you need.

You can also have multiple states in one trigger not just two. So you can for example have a 'enter' state and a 'hover' state with different transitions between the states.

For example:

state('in', style({opacity: 1,
            transform: 'translateY(0)'
        })),
state('hover', style({background: 'red'}),
transition('* <=> hover', animate('200ms ease-in'))