Multiple animation triggers in angular2 Component

Kevin Regenrek picture Kevin Regenrek · Aug 23, 2016 · Viewed 10.9k times · Source

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

Answer

Filip Lauc picture Filip Lauc · Aug 23, 2016

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