What is the typescript type for Element.animation? If I have code that looks like this:

const ref = useRef<HTMLElement>( null );

useEffect( () => {
    const animation: ANIMTATION_TYPE = ref.current.animate( SOME_ANIMATION );
}, []);

return (
    <div ref={ref}>
        Some Div
    </div>
)

What should ANIMATION_TYPE be? I tried AnimationTimeline but that dosen't include the .play or .pause functions.

CodePudding user response：

If you hover over the call to animate( in your IDE, it should tell you the type. I get this:

(method) Animatable.animate(
  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
  options?: number | KeyframeAnimationOptions | undefined
): Animation

So the return type of that method is Animation.

Which has a play() method and works like you expect.

const animation: Animation = document.getElementById('testing123')!.animate([])
animation.play() // works

Playground

You probably don't need to though. TS knows the return type of that method, and if you just want to use the values in that scope, this would do fine:

const animation = document.getElementById('testing123')!.animate([])
animation.play() // works

Playground

CodePudding user response：

The animation would be of Animation type. Here you can find what you need on the animate function.

https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.animatable.html