2

Before version 4.2 (in RC for the moment), for a zoom animation, I used to have the following code:

export const magnifyAnimation = trigger('magnify', [
    state('default', style({
        'transform': 'scale(1)'
    })),
    state('magnified', style({
        'transform': 'scale(1.3)'
    })),
    transition('default <=> magnified', [
        animate('430ms ease-out')
    ])
]);

Now, since 4.2 supports input params (waited a long time for this), I'm going with this:

component code:

<button
    [@magnify]="{ value: state, params: { scaleFactor: '1.3' }}"
    (mouseenter)="state = 'magnified'"
    (mouseleave)="state = 'default'">
        Hover me
</button>

and the animation code changed to this:

const zoomEffect = animation([
    animate('430ms ease-out', style({
        'transform': 'scale({{scaleFactor}})'
    }))
], { params: { scaleFactor: '1' } });

export const magnifyAnimation = trigger('magnify', [
    transition('default => magnified', useAnimation(zoomEffect), { params: { scaleFactor: '1.3' } }),
    transition('magnified => default', useAnimation(zoomEffect), { params: { scaleFactor: '1' } })
]);

BUT, without having styles defined in states in the animation code, after the animation finishes, the element (button in this case) always jumps to it's natural size. And I don't know of a way to specify the input param in the state() code block.

I've also tried this:

state('magnified', style({
    'transform': '*'
}))

I was hoping it would keep whatever value the transformation had at the end of the animation, but it doesn't accomplish anything...

br.julien
  • 3,420
  • 2
  • 23
  • 44
MrCroft
  • 3,049
  • 2
  • 34
  • 50
  • I sometimes have some problems to execute :leave transitions. This problems happens only in angular 4.2.0-rc-2/1, but if I downgrade to 4.1.0, the problem disapears (but you lose features like animation stagging in 4.1.0). I think we have to wait to 4.2.0 final – Serginho Jun 07 '17 at 22:26
  • I have a similar issue where the animation reverts to it's original style using dynamic animation input params. https://stackoverflow.com/questions/45377870/angular-4-dynamic-height-animation-reverts-after-animation – Miguel Felipe Guillen Calo Jul 31 '17 at 08:18
  • @MiguelFelipeGuillenCalo I ended up using AnimationBuilder, which has no notion of state or triggers - the "end" properties are kept until deciding to do another animation. And for my case at least, AnimationBuilder was a better choice than using states and triggers, even if those would both work with input params. As for the input params way, the issue I've opened has been labeled. It's taken into consideration. https://github.com/angular/angular/issues/17362 – MrCroft Jul 31 '17 at 11:39

0 Answers0