P1a: Element.animate() — Web Animations API Fake #78

New issue

Closed

opened 2026-06-18 17:17:55 +00:00 by Artur · 1 comment

Artur commented

2026-06-18 17:17:55 +00:00

Owner

P1a: `Element.animate()` — Web Animations API

Priority: HIGH
Betrifft: youtube.com, alle Polymer/Lit-Seiten
Aufwand: ~4h

Problembeschreibung

YouTube's Polymer-Framework nutzt element.animate() für UI-Animationen.
Element.animate() ist nicht implementiert → TypeError → App-Features deaktiviert.

Browser-Spec: element.animate(keyframes, options) erstellt eine Animation-Instanz.

Lösung: Minimaler Fake

class AnimationStub extends EventTarget {
  playState = 'finished';
  currentTime = 0;
  startTime = 0;
  effect = null;
  onfinish = null;
  oncancel = null;
  finished = Promise.resolve(this);
  
  play() { this.playState = 'running'; }
  pause() { this.playState = 'paused'; }
  finish() {
    this.playState = 'finished';
    this.dispatchEvent(new Event('finish'));
    if (this.onfinish) this.onfinish(new Event('finish'));
  }
  cancel() {
    this.playState = 'idle';
    this.dispatchEvent(new Event('cancel'));
    if (this.oncancel) this.oncancel(new Event('cancel'));
  }
  reverse() { /* noop */ }
  commitStyles() { /* noop */ }
}

Element.prototype.animate = function(keyframes, options) {
  return new AnimationStub();
};

Kein echtes Rendering — die Animation finished sofort (synchron).

Akzeptanzkriterien

element.animate(...) wirft keinen TypeError
Returned Animation-Objekt mit .playState, .finished, .cancel()
.finished ist ein Promise das sofort resolved
YouTube lädt ohne animate-bezogene TypeError
Unit-Test: animate returned AnimationStub

Betroffene Dateien

Datei	Änderung
`src/fakes/animations.ts`	NEU — AnimationStub + Element.animate
`src/pages/page.ts`	installation in page setup
`tests/unit/sprint17-animations.test.ts`	5+ Tests

## P1a: `Element.animate()` — Web Animations API **Priority:** HIGH **Betrifft:** youtube.com, alle Polymer/Lit-Seiten **Aufwand:** ~4h ### Problembeschreibung YouTube's Polymer-Framework nutzt `element.animate()` für UI-Animationen. `Element.animate()` ist nicht implementiert → TypeError → App-Features deaktiviert. Browser-Spec: `element.animate(keyframes, options)` erstellt eine `Animation`-Instanz. ### Lösung: Minimaler Fake ```typescript class AnimationStub extends EventTarget { playState = 'finished'; currentTime = 0; startTime = 0; effect = null; onfinish = null; oncancel = null; finished = Promise.resolve(this); play() { this.playState = 'running'; } pause() { this.playState = 'paused'; } finish() { this.playState = 'finished'; this.dispatchEvent(new Event('finish')); if (this.onfinish) this.onfinish(new Event('finish')); } cancel() { this.playState = 'idle'; this.dispatchEvent(new Event('cancel')); if (this.oncancel) this.oncancel(new Event('cancel')); } reverse() { /* noop */ } commitStyles() { /* noop */ } } Element.prototype.animate = function(keyframes, options) { return new AnimationStub(); }; ``` Kein echtes Rendering — die Animation finished sofort (synchron). ### Akzeptanzkriterien - [ ] `element.animate(...)` wirft keinen TypeError - [ ] Returned Animation-Objekt mit `.playState`, `.finished`, `.cancel()` - [ ] `.finished` ist ein Promise das sofort resolved - [ ] YouTube lädt ohne animate-bezogene TypeError - [ ] Unit-Test: animate returned AnimationStub ### Betroffene Dateien | Datei | Änderung | |-------|----------| | `src/fakes/animations.ts` | NEU — AnimationStub + Element.animate | | `src/pages/page.ts` | installation in page setup | | `tests/unit/sprint17-animations.test.ts` | 5+ Tests |

Artur added the

feature

label

2026-06-18 17:17:55 +00:00

glow was assigned by Artur

2026-06-18 17:17:55 +00:00

Artur referenced this issue from a commit

2026-06-18 17:26:51 +00:00

Sprint 16: Convergence Gap Fixes — ES Module, HTML Filter, currentScript, Animate

Artur closed this issue

2026-06-18 17:27:08 +00:00

Artur commented

2026-06-18 17:27:08 +00:00

Author

Owner

✅ Bereits implementiert — Element.animate() + AnimationStub

Fundort: src/fakes/animations.ts (NEU) + src/pages/page.ts:281-312

AnimationStub:

finished Promise resolved sofort
playState = 'finished' (kein echtes Rendering)
cancel(), play(), pause(), reverse() — alle noop
EventTarget-kompatible API (addEventListener, dispatchEvent)

Commit: eca1765

✅ **Bereits implementiert** — Element.animate() + AnimationStub **Fundort:** `src/fakes/animations.ts` (NEU) + `src/pages/page.ts:281-312` `AnimationStub`: - `finished` Promise resolved sofort - `playState = 'finished'` (kein echtes Rendering) - `cancel()`, `play()`, `pause()`, `reverse()` — alle noop - EventTarget-kompatible API (`addEventListener`, `dispatchEvent`) **Commit:** `eca1765`

Artur referenced this issue

2026-06-18 18:17:58 +00:00

Phase 2: Production Engine — Epic (ES Module, Performance, API Completeness) #56