Re: [csswg-drafts] [css-cascade] Additive CSS

> @birtles I'm in a similar situation. Does the proposed composite order control allow folks to, for example, have 100 different elements flying around and randomly choosing various translateX/translateY/rotate/scale values with completely different timings _without_ a bunch of overhead that tracks the order of previous transforms?

Yes. Obviously if they are different elements, then they have separate composite stacks so there should be no conflict. Within a single element, you can call `getAnimations()` and iterate over the returned `Animation`s to see what animations it has running (and hence where in the stack you want to add new animations to get the desired result).

> For example, with this additive stuff, after animating to rotate(180deg) how can I get back to 0deg without tracking previous stuff? It seems I'd have to do rotate(-180deg) in order to cancel out the previous rotate(180deg), right? 

You can animate the `rotate` property to `rotate(0deg)` without specifying a `from` value to get the desired effect.

> If there's a translateX(100px) and halfway through that, I need to animate translateY(200px) (without interfering with the translateX()) but previously there had already been a translateY(500px) applied, how can I ensure that it arrives at translateY(200px) instead of translateY(700px)? Would I have to getComputedStyle() and parse through the current values? What if it was part-way through a translateY(500px) animation (thus getComputedStyle() won't return the destination)?

Yes, if you're looking to animate the components independently in a pseudo-additive fashion like that despite the fact that they are expressed by the same CSS property, then, for now, you'll need to go through the result of `getAnimations()` to find your current target Y. You can annotate the `Animation` objects with extra metadata (e.g. the target X/Y values) when you generate them to avoid parsing the result of `getKeyframes()` later.

There's some complexity but I think it's manageable and only present when _all_ of the following are true:

* You have a pseudo-additive animation, i.e. start point is not fixed _and_ end point is _and_ you have underlying animations on that component that you want to blend with the underlying animations
  * If start and end point are fixed you can cancel the existing animations on the necessary component
  * If start and end are additive, no extra work is necessary
  * If there are no underlying animations on the components, then obviously no extra work is necessary
* _And_ you are trying to animate components that are represented by the same property
  * For animating `rotate` etc. you can use the separate property

If we find that this is common enough, then we can split off separate properties for the independent components that need to be animated in this way.

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

Received on Tuesday, 1 August 2017 09:33:42 UTC