search

rtfeldman / elm-css

Typed CSS in Elm.
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest
BSD 3-Clause "New" or "Revised" License
1.24k stars 197 forks source link

Animations #313

Closed rtfeldman closed 6 years ago

rtfeldman commented 7 years ago

I'd like to provide first-class support for animations, including @keyframes. (Here's a nice article introducing them.)

@keyframes has some peculiar characteristics. Like classes, animation names are at risk of global namespace collisions. Unlike classes, they are used only by other styles and not DOM elements, so we can safely hash them in our Elm code at runtime to guarantee uniqueness. No coordination is needed with the DOM. However, we need to return both the Style and the AnimationName (should be an opaque type so you can't rely on it even accidentally) so we can pass it to animationName : AnimationName -> Style. Perhaps returning ( Style, AnimationName ) will suffice. (Doing this might feel like a throwback to 2014's Signal.mailbox, heh.)

It seems like we should require specifying from and to, and then some number of optional percentages in between. (We can/should probably emit 0% and 100% at the end because they'll gzip better than from and to)

Mainly @keyframes means that elm-css will for sure need to do some hashing, whether you're using it at build time or at runtime.

The rest of the animations stuff doesn't seem to be as tricky, but there's still enough there that it may warrant a separate Css.Animation module, the way Media did. Not sure though.

azer commented 6 years ago

Any workarounds ? Is it possible to create keyframes with property function ?

rtfeldman commented 6 years ago

Closing in favor of concrete API proposal: https://github.com/rtfeldman/elm-css/issues/431