animation.id, animation.cancel

Use KeyframeAnimationOptions instead of KeyframeEffectOptions to read id from options and attach it to the returned animation

Remove an animation from animations when the cancel method is called

Author: adjsky

src/mocks/web-animations-api/__tests__/index.test.ts

@@ -35,4 +35,22 @@ describe('Animations API', () => {
     expect(element.getAnimations().length).toBe(0);
     expect(document.getAnimations().length).toBe(0);
   });
+
+  it('should read id from options and attach it to the returned animation', async () => {
+    const element = document.createElement('div');
+    const testId = 'testId';
+
+    const animation = element.animate({ opacity: 0 }, { id: testId });
+    expect(animation.id).toBe(testId);
+  });
+
+  it('should remove an animation from element if the animation was cancelled', () => {
+    const element = document.createElement('div');
+
+    const animation = element.animate({ opacity: 0 }, 1000);
+    expect(element.getAnimations().length).toBe(1);
+
+    animation.cancel();
+    expect(element.getAnimations().length).toBe(0);
+  });
 });

src/mocks/web-animations-api/index.ts

@@ -2,32 +2,42 @@ import { mockAnimation } from './Animation';
 
 const elementAnimations = new Map<Element, Animation[]>();
 
+function removeFromAnimations(element: Element, animation: Animation) {
+  const animations = elementAnimations.get(element);
+
+  if (animations) {
+    const index = animations.indexOf(animation);
+
+    if (index !== -1) {
+      animations.splice(index, 1);
+    }
+  }
+}
+
 function animate(
   this: Element,
   keyframes: Keyframe[],
-  options?: number | KeyframeEffectOptions
+  options?: number | KeyframeAnimationOptions
 ) {
   const keyframeEffect = new KeyframeEffect(this, keyframes, options);
 
   const animation = new Animation(keyframeEffect);
+  if (typeof options == 'object' && options.id) {
+    animation.id = options.id;
+  }
 
   const animations = elementAnimations.get(this) ?? [];
 
   animations.push(animation);
 
   elementAnimations.set(this, animations);
 
-  animation.addEventListener('finish', () => {
-    const animations = elementAnimations.get(this);
-
-    if (animations) {
-      const index = animations.indexOf(animation);
-
-      if (index !== -1) {
-        animations.splice(index, 1);
-      }
-    }
-  });
+  animation.addEventListener('finish', () =>
+    removeFromAnimations(this, animation)
+  );
+  animation.addEventListener('cancel', () =>
+    removeFromAnimations(this, animation)
+  );
 
   animation.play();