Re: [csswg-drafts] [css-contain-3][css-animations][css-transitions] Isolate animation side-effects? (#6398)

> * CSS transitions are triggered using the before-change style/after-change style. (Taking into account the current effect value for re-targeting purposes. The spec already covers that, though).

The starting of transitions will be sort of how it works today based on [step 4 of starting transitions in css-transitions-1](https://www.w3.org/TR/css-transitions-1/#starting:~:text=If%20the%20element%20has%20a%20running%20transition%20for%20the%20property). I.e. if the end value (which is equivalent to your suggested before-change style) is the same, no new transition is started.

One notable difference with the proposal is that I think setting a property equal to its current animation value normally would have no effect but with your proposed change would start a transition. We could probably carve out an exception for this given that we need to compute the current value to start from anyways.

To make sure I understand the current effect value, if you interrupt a transition like the following:
```js
e.style.transition = 'all 1s linear';
e.style.left = '100px';
setTimeout(() => {
  // getComputedStyle(e).left == '50px'
  e.style.left = '200px';
}, 500);
```
We would still compute the current effect value from the replaced transition (e.g. left: 50px)?

> The animation-/transition- properties are ignored on the animated style, hence if they appear/disappear/update because of container queries re-evaluating, then nothing happens. ("Global animation-tainting").

Does this mean the entire descendant style which matches the container query would be "animated style" rather than base style? E.g. the following wouldn't start an animation on #b?
```html
<style>
@keyframes grow {
  0% { width: 100px;
  100% { width: 1000px;
}
#a {
  animation: grow 5s;
  contain: size;
}

@container (min-width: 500px){
  #b {
    animation: grow 5s;
  }
}
<div id="a">
  <div id="b">
  </div>
</div>
```

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


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

Received on Friday, 25 June 2021 00:10:24 UTC