CODEWITHSUNDEEP
javascriptangular
RasMason
RasMason

Reputation: 2212

Angular 4 Web Animations resets in Safari

I'm animating the background of a div

(I know I could do it with css but I just want to get to grips with this)

It works in Chrome and FireFox and I have installed polyfills, in Safari it transitions as it should from transparent to blue, however resets to back to transparent.

export const NavBg = trigger('NavBgState', [
  state('inActive', style({
    'background-color': 'transparent'
   })),
  state('active', style({
    'background-color': '#080253'
  })),

  transition('inActive <=> active', animate('500ms ease-out'))
]);

As I said, works fine in other browsers, wondering if anyone has had similar issues

Upvotes: 0

Views: 476

Answers (1)

RasMason
RasMason

Reputation: 2212

Solved this by changing 'background-color' to 'backgroundColor' so:

export const NavBg = trigger('NavBgState', [
  state('inActive', style({
    'backgroundColor': 'transparent'
   })),
  state('active', style({
    'backgroundColor': '#080253'
  })),

  transition('inActive <=> active', animate('500ms ease-out'))
]);

It now works in Safari

Hope this helps anyone who comes across this

Upvotes: 1

Related Questions