[Animation] feat: Animation Identifiers

[liamdebeasi]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Currently, CSS Animations are given a default/unique ID when created. Web Animations are given no ID. This can cause debugging to be challenging as developers cannot easily identify their animations when using things like the Animation pane in Chrome Dev Tools.

Setting an ID will show up in Chrome dev tools, making animations a bit easier to debug.

Describe Preferred Solution

1. Expose a way to set an ID on an animation. This ID will be applied to keyframe names/style tags for CSS Animations, and will be set on the id property on an animation object for Web Animations.

2. Expose a public readonly property called id.

Related Code

createAnimation('my-animation-id')
  .duration(1000)
  .addElement(els)
  .fromTo('opacity', 1, 0);

I don't think we need to expose a new method for this -- just set the ID on animation creation.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.