Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 419
Kevin Regenrek Avatar asked Aug 23 '16 03:08

Kevin Regenrek


People also ask

Which animation strategy would you use to apply multiple styles for a transition?

The keyframes() function in Angular allows you to specify multiple interim styles within a single transition, with an optional offset to define the point in the animation where each style change should occur.


1 Answers

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'))
like image 79
Filip Lauc Avatar answered Sep 28 '22 07:09

Filip Lauc