Re: [csswg-drafts] [css-transitions-1] Define before/after-change style in terms of base (#6688)

Sounds good to me to make transitions not start if there is an animation on that property. I think you should look for animations in the after-change style so that we avoid starting a transition in the case in #8701.

As an extreme use case, consider a page which makes use of both transitions and animations to move an element around, e.g.
```html
<style>
#target {
  transition: transform 1s;
}
</style>
<script>
moveTo(transform) {
  let animation = target.animate([{transform}], {duration: 1000, fill: 'forwards'});
  animation.finished.then(() => {
    // Changes the base style to match the animated position.
    animation.commitStyles();
    animation.cancel();
  });
}
</script>
```

The call to commitStyles should not start a transition (this would cause the element to move back to its old location and slide back to the target). I think this would be fine right now because the animation is still technically active, however we should also make sure that with #5394 you can omit the fill and have the animation technically not active in the final frame, i.e.

```js
bounceTo(transform) {
  let animation = target.animate([{transform}], 1000);
  animation.finished.then(() => {
    // Changes the base style to match the animated position.
    animation.commitStyles();
  });
}
```

In this case the animation is technically no longer active but was previously - so perhaps this is just justification to consider animations in the before or after change style?

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/pull/6688#issuecomment-1505474485 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 April 2023 15:27:13 UTC