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

@jackdoyle Thanks for the use cases, they seem relevant.

Here's a similar thing written using the solution I proposed:
```
:root {
  --GSAP: 1000;
  --GSAP_ROTATE: var(--GSAP) 0;
  --GSAP_SCALE: var(--GSAP) 1;
  --GSAP_TRANSLATE: var(--GSAP) 2;
}
#WebAnimation1 {
  transition: transform[] 1s linear;
}
#WebAnimation1.State1{
  transform[ GSAP_ROTATE 0 ]: rotate(180deg)
}
#WebAnimation1.State2{
  transform[ GSAP_TRANSLATE 0 ]: translateX(200px);
}
#WebAnimation1.State3{
  transform[ GSAP_ROTATE 1 ]: rotate(-180deg);
}
#WebAnimation1.State1b {
  transform[ GSAP_ROTATE 0 ]: rotate(270deg);
}
```

Now you can add classes State1, State2 and State3 in whichever order you want and get a deterministic transition. The way this works is that the subtransforms will always be sorted by number sequence, in descending order. That means "1000 2 0" (GSAP_TRANSLATE 0) will always be first, "1000 0 1" (GSAP_ROTATE 1) will be second and "1000 0 0" (GSAP_ROTATE 0) will always be third.

----------------------------------

I also have a proposal to allow you to leave out the last number as a automatically-unique value (you cannot override it later like I did with State1 and State1b, but its relative ordering will be solved automatically using css cascade order)

```
#WebAnimation2.State1{
  transform[ GSAP_TRANSLATE + ]: translateX(200px);
}
#WebAnimation2.State2{
  transform[ GSAP_TRANSLATE + ]: translateY(100px);
}
```

----------------------------------

Last but not least, this gives a lot of flexibility when you need mixing frameworks: If there is another framework, you can (as an author) decide in which order the operations of these frameworks should take place. For instance, if this framework ("ANIMF") should take place after GSAP you can ensure it uses 

```
--ANIMF: 500
```
and if you want to run its effects before GSAP
```
--ANIMF: 1500
```
but you can also have its effect run during GSAP Scale phase
```
--ANIMF: var(--GSAP_SCALE) 1000
```
Since variables cascade you can even decide that element per element by redefining GSAP and ANIMF per element.

If you need some operations of ANIMF to happen before GSAP but others to happen after, you can use
```
--ANIMF: 500;
--ANIMF_TRANSLATE_EFFECTS: var(--GSAP_TRANSLATE) 1000;
```

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

Received on Tuesday, 25 July 2017 21:04:53 UTC