How to flash

[shan75]

Hi
This is not an issue, but I want to use the basic flash , but it flashes only two times. I want to flash n times. How to do that? Also I want to trigger the flash by some action. How to achieve it?

Can you please explain

Thanks

[Jiayi Hu]

Unfortunately it's not possible to configure the number of flashes, but here is the animation if you want to copy and customize it to have more than 2 flashes:

export const flash = animation(
  animate(
    '{{ timing }}s {{ delay }}s',
    keyframes([
      style({ opacity: 1 }),
      style({ opacity: 0 }),
      style({ opacity: 1 }),
      style({ opacity: 0 }),
      style({ opacity: 1 }),
    ])
  ),
  { params: { timing: DEFAULT_TIMING, delay: 0 } }
);

About the trigger, you must define the action in the transition. For instance, with the following code, the animation wil be triggered when the flash property changes from stateA to stateB aka this.flash = 'stateB':

animations: [
    trigger('flash', [transition('stateA => stateB', useAnimation(flash))])
]

[shan75]

Thank you very much Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Jiayi Hu <[e-mail]> Sent: Tuesday, September 25, 2018 9:39 pm To: jiayihu/ng-animate Cc: shan75; Author Subject: Re: [jiayihu/ng-animate] How to flash (#16) Unfortunately it's not possible to configure the number of flashes, but here is the animation if you want to copy and customize it to have more than 2 flashes: export const flash = animation( animate( '{{ timing }}s {{ delay }}s', keyframes([ style({ opacity: 1 }), style({ opacity: 0 }), style({ opacity: 1 }), style({ opacity: 0 }), style({ opacity: 1 }), ]) ), { params: { timing: DEFAULT_TIMING, delay: 0 } } ); About the trigger, you must define the action in the transition. For instance, with the following code, the animation wil be triggered when the flash property changes from stateA to stateB aka this.flash = 'stateB': animations: [ trigger('flash', [transition('stateA => stateB', useAnimation(flash))]) ] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fjiayihu%2Fng-animate%2Fissues%2F16%23issuecomment-424493528&data=02%7C01%7C%7C7213c1a0573a4672583a08d623270e42%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636735047974141459&sdata=GfrzlFSyhkWlfmoUMlDV8tpMcz8ZQPqDhcRlOP8YOy0%3D&reserved=0>, or mute the thread<https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAc45pq8hKD6MpIZRdZPSNizoaxIBjMapks5uepSZgaJpZM4W47gc&data=02%7C01%7C%7C7213c1a0573a4672583a08d623270e42%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636735047974141459&sdata=7mfcVbTmZGHB7yFylexAgT8qKCp04NGy7ZwjyN%2BvKmM%3D&reserved=0>.

[shan75]

Hi Thanks for the details.
I am not able to set the key frames as you have explained, I am very new to angular 4 and, it is not working for me. I have managed to get the animation work based on state. But I am not able to repeat 5 times. Can you please advice. Sorry for trouble
Thanks

animations: [
trigger('flash', [
state('small', style({ opacity: 1})),
state('large', style({ opacity: 0})),
transition('small => large', useAnimation(flash,
{ params: { timing: 5, delay: 1 }
}))
])
]