Pseudo Element Animation Support

[11]

Feature Request

Describe the Feature

Adding a pseudo element attribute to the options object - similar to the actual native api

Ex: https://css-tricks.com/pseudo-elements-in-the-web-animations-api/

Describe the Solution You'd Like

When instantiating a new web animations object, there should be an option to define a pseudo element you'd like to target

const { ref, playState } = useWebAnimations({
    keyframes: {
      transform: "translateX(500px)", 
      background: ["red", "blue", "green"], 
    },
    timing: {
      delay: 500, 
      duration: 1000, 
      iterations: 2, 
      direction: "alternate", 
      easing: "ease-in-out", 
    },
    pseudoElement: '::after', // NOTE: this flag here would be added
    // ... More useful options ...
  });

Describe Alternatives You've Considered

I don't think there is another way to handle this? The only alternative is to animate another element and change the markup to work well with the added element

Additional Information

Example of why this is useful:

An example where this comes up is when trying to create toast messages after clicking on an element

For example - this toast message after clicking on a copy to clipboard button is often just a pseudo element:

So being able to keep the styling for this toast message inside the pseudo element CSS, while being able to express animation logic with useWebAnimations.

[wellyshen]

@11 If you pass the pseudoElement into the timing options, it can work (not test it yet). Because the timing reflects to the options parameter of the Element.animate(). Maybe we should rename it as animateOptions for better understanding.

[wellyshen]

@11 I Now we can use the pseudoElement via the animationOptions in v0.7.0.