3

I'm using @angular/animations, but when i use the property "offset" in order to make a stagger effect, in Safari blocks the execution of the entire website. After having removed it, it start running correctly again.

This is my piece of animation:

const staggerOpacTrans =    [
transition('* => *', [
  query(':enter', style({ opacity: 0 }), { optional: true }),

  query(':enter', stagger('100ms', [
    animate('.5s ease-in-out', keyframes([
      style({ opacity: 0, transform: 'translateY(20px)', offset: 0 }),
      style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
    ]))]), { optional: true })
]),]

export const staggerOpacTransAnimation = trigger('staggerOpacTransAnimation', staggerOpacTrans);

I've tried installing this polyfill: 'web-animations-js' and importing it in polyfills.ts, but still it doesn't work.

Has anyone ever had problems with offset property animation browsing with Safari? All the other browser supports that feature perfectly.

Thank youThis is the error it throws

Arianna
  • 345
  • 1
  • 4
  • 10

0 Answers0