Multiple animation triggers in angular2 Component

Question

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 components (parent child) for this case?

item.compoennt.ts

// removed the import and class part for better readability

@Component({
  selector: 'item',
  templateUrl: './item.template.html',
  styleUrls: ['./item.style.scss'],
  animations: [
    // page load animation 
    trigger('slideIn', [
        state('in', style({
            opacity: 1,
            transform: 'translateY(0)'
        })),
        transition('void => *', [
            style({
                transform: 'translateY(100%)',
                opacity: 0
            }),
            animate('0.5s 100ms ease-in')
      ])
    ]),


    // <--- this fails
    // hover animation
    trigger('fadeIn', [
      state('over', style({
            opacity: 1
        })),
        transition('void => *', [
            style({
                opacity: 0
            }),
            animate('0.5s 100ms ease-in')
    ])
  ],
})

item.template.html

<div class="item" [@slideIn]="enterState">

    <div class="info">
        SOME INFO
    </div>
    <div class="info-on-hover" [@fadeIn]="hoverState">
        SOME INFO 
    </div>
</div>

Oh and someone should create the tag "angular2-animation"

Regards

Here is something I built http://plnkr.co/edit/8beFC9Y5C2jpD6cV52I0 (tried it...) — Kevin Regenrek, Aug 23 '16 at 15:45

score 7 · Accepted Answer · edited Dec 21 '16 at 16:42

7

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

edited Dec 21 '16 at 16:42

nima

6,566
4
45
57

answered Aug 23 '16 at 12:54

Filip Lauc

2,989
1
17
29

Hi, yeah but if I define two triggers it doesn't get compiled. Or is it just me? – Kevin Regenrek Aug 23 '16 at 15:45
NVM. I forgot some closing tags so I thought multiple triggers aren't possible. Thank you very much for help! – Kevin Regenrek Aug 23 '16 at 16:53
what if you wanted to selectively trigger an animation on a single element? Then this wouldn't work would it? This use-case is only useful for triggers inside parent elements. Let's say I have: ```
``` How can I use this with a variable that basically tells these triggers which one animation to trigger? Or would this mean I'd have to create a whole ton of states for a single animation? – SimbaClaws Apr 28 '20 at 16:13

Multiple animation triggers in angular2 Component

1 Answers1

Linked