width values. While this is arguably something CSS should handle natively, it’s not in the spec and it’s unclear if any browser vendors will implement it independently.
As nicely as this solution works, I still prefer to keep the presentation defined by CSS as much as possible. In particular, I wasn’t happy leaving this particular line from Nikita’s script as-is:
If we’re smart we make these styles configurable, but then we’re adding complexity to our code and making it harder for other developers to use our code (do I pass my custom CSS as the third argument or fourth?). We can do better.
Referencing Style Sheets
In this particular case, the three
transition values—property, duration, and timing function—are all hardcoded. It may make sense to leave the
expandWidth() function customized for a particular module). But there’s no reason the duration and timing function can’t be defined in CSS.
Let’s make that line a little more adaptive:
And in the CSS:
Separation of Concerns
This pattern is handy if you’re working on a customizable framework:
Which compiles to:
You’ll notice that the CSS includes
transition-property: none. This prevents the CSS from having an effect on the element—that is, if you were to set
transition-property: all which isn’t what we want either.
And of course you will need to add vendor prefixes to keep things working across most browsers.