Re: [csswg-drafts] [web-animations-1] Alternative to FillAnimation: replace events (#3689)

I wonder if we could have API directly to commit an animation. I worry that a lot of authors would write something like this:

```javascript
function commitStyles(replaceEvent)
{
    const animation = replaceEvent.target;
    const element = animation.effect.target;
    for (let property of Object.getOwnPropertyNames(animation.getKeyframes())) {
        if (property == "offset" || property == "computedOffset" || property == "easing" || property == "composite")
            continue;
        element.style[property] = replaceEvent.computedStyle[property];
    }
}

target.animate(…).onreplace = commitStyles;
```

I think it'd be awesome if we could provide some built-in function on an effect to apply its animated values directly to the target, with potentially a list of properties to commit.

```javascript
// Commit all animated properties to inline style upon completion.
target.animate(…).onreplace = evt => {
    evt.target.effect.commitAnimatedProperties();
};

// Commit select animated properties to inline style upon completion.
target.animate(…).onreplace = evt => {
    evt.target.effect.commitAnimatedProperties("transform", "opacity");
};
```

Naming certainly could improve, there likely is a catchier and shorter name for the function of committing some animated properties to inline style.

We could take it one step further and forgo the use of the `replace` event entirely with:

```javascript

// Commit all animated properties to inline style upon completion.
target.animate(
    { transform: 'translateX(-80px)', composite: 'add' },
    { duration: 1000, easing: 'ease', commit: 'all' }
);

// Commit select animated properties to inline style upon completion.
target.animate(
    { transform: 'translateX(-80px)', composite: 'add' },
    { duration: 1000, easing: 'ease', commit: ['transform', 'opacity'] }
  );
```

-- 
GitHub Notification of comment by graouts
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3689#issuecomment-478049033 using your GitHub account

Received on Friday, 29 March 2019 15:50:38 UTC