Type definition for HTMLElement does not include animate() function (lib.es6.t.ds)

[fr0]

Search Terms:
HTMLElement animate lib.es6.t.ds

Code

let e: HTMLElement;
// ... assign e here ...
e.animate([
    {transform: 'translateX(0px)' }, {transform: 'translateX(100px)' }
  ], {
    duration: 200,
    easing: 'ease-in-out'
  });

Expected behavior:

There should not be a compiler error with the above code.

Actual behavior:

There is a compiler error: Property 'animate' does not exist on type 'HTMLElement'.

Playground Link:

https://www.typescriptlang.org/play/#src=let%20e%3A%20HTMLElement%3B%0D%0A%2F%2F%20...%20assign%20e%20here%20...%0D%0Ae.animate(%5B%0D%0A%20%20%20%20%7Btransform%3A%20'translateX(0px)'%20%7D%2C%20%7Btransform%3A%20'translateX(100px)'%20%7D%0D%0A%20%20%5D%2C%20%7B%0D%0A%20%20%20%20duration%3A%20200%2C%0D%0A%20%20%20%20easing%3A%20'ease-in-out'%0D%0A%20%20%7D)%3B%0D%0A

Related Issues:

None

Other information:

web-animations spec: https://www.w3.org/TR/web-animations-1/
MDN link: https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

[mhegazy]

PRs welcomed. You can find more information about contributing lib.d.ts fixes at https://github.com/Microsoft/TypeScript/blob/master/CONTRIBUTING.md#contributing-libdts-fixes.

[mhegazy]

thanks @benbraou!

[brasilino]

I'm having this same error. To correct it should I upgrade the version of typescript to 2.8?

I'am using:

"ionic-angular": "3.9.2",
"typescript": "2.4.2"

[mhegazy]

you can either upgrade to 2.8 or later, or in a .d.ts file in your project add:

interface HTMLElement { 
    animate(keyframes: AnimationKeyFrame | AnimationKeyFrame[], options: number | AnimationOptions): Animation;
}

interface AnimationKeyFrame {
    easing?: string | string[];
    offset?: number | null | (number | null)[];
    [index: string]: string | number | number[] | string[] | null | (number | null)[] | undefined;
}

interface AnimationOptions {
    delay?: number;
    direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
    duration?: number;
    easing?: string;
    endDelay?: number;
    fill?: "none" | "forwards" | "backwards" | "both" | "auto";
    id?: string;
    iterationStart?: number;
    iterations?: number;
}