0

I have problem with Angular animation on Internet Explorer and Edge. On another browsers everything is ok (almost).

'offset' is not supported by that browsers. I don't know why polyfill dont change code for IE. Or maybe this is bug? When I delete that property from animation, then the error disappears. But I need timing.

Error what I get:

ERROR Error: The animation trigger "slideWall" has failed to build due to the following errors: 
- The provided animation property "offset" is not a supported CSS property for animations

My animation code what I use:

import {animate, keyframes, style, transition, trigger} from "@angular/animations";

export const slideLeftAnimation =
  trigger('slideWall', [
  transition('* => *', [
    style({ transform: "translate3d(0%, 0, 0, 0)", zIndex: "0" , offset: 0 }),
    animate("1500ms cubic-bezier(0.285, 0.860, 0.790, 0.130)", keyframes([
      style({ transform: "translate3d(-102%, 0, 0)", zIndex: "9999" , offset: 0 }),
      style({ transform: "translate3d(0%, 0, 0)", zIndex: "9999" , offset: 0.44 }),
      style({ transform: "translate3d(0%, 0, 0)", zIndex: "9999" , offset: 0.56 }),
      style({ transform: "translate3d(-102%, 0, 0)", zIndex: "9999" , offset: 1 }),
    ]))
  ])
]);

HTML:

<div *ngIf="showWall" class="welcome__wall" [@slideWall]="showWall === ('run' || 'run2')">...</div>

I checked similar topics with solutions, unfortunately they did not help. For example: Angular animation not working in IE edge with remove comments from polyfills.ts and install:

import 'web-animations-js';
import 'classlist.js';

I checked that topic too, but I got only error after import that all lines to polyfills.ts Angular 2 / 4 / 5 not working in IE11

And that topic don't help too: Transition animation in angular app does not work in EDGE

mrKorny
  • 91
  • 8
  • Since offset is a [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/offset) property, would `offsetDistance` work? – Phix Jun 01 '20 at 18:45
  • Nope, the elements don't show up at all, nothing animates. – mrKorny Jun 01 '20 at 18:49
  • `"The animation trigger "slideWall" has failed to build due to the following errors: - The provided animation property "offsetDistance" is not a supported CSS property for animations ` – mrKorny Jun 01 '20 at 18:59
  • @mrKorny older edge versions called it `motion-distance`, you could try that. However, neither of this has support in IE, so that's definitely not going to work in that browser – Poul Kruijt Jun 01 '20 at 19:12
  • @PoulKruijt It didn't help either, even on EDGE – mrKorny Jun 01 '20 at 19:53

0 Answers0