Skip to content

Update transition mixin to allow for multiple properties #162

@elseloop

Description

@elseloop

Our existing transition mixin only allows for a single transition to be declared, though the spec allows for a comma-separated list of transitions on an element. This means developers are frequently writing the non-mixin version longhand. Admittedly, the longhand isn't that much longer, but it doesn't allow for defaults or skipped declarations (transition: opacity; is invalid, for instance, as is transition: opacity .3; (no time unit will blow up the declaration)). Which is where mixins are valuable (he says, to the chorus).

Something like transition($properties...); would allow for multiple declarations, so long as they were syntactically correct. But since we're doing the work, it seems better to go the next step and allow some flexibility and defaults if, for instance, you wanted multiple transitions with different timing or easing. This is what the options map allows for now on the single property; I'm not sure how to implement that for each declared property (and Sass doesn't allow you to combine maps and variable-length parameters in a mixin anyway, so…). However, something like transition(opacity .2s linear, top, max-height .4 .1 ease-in-out), where top would get the defined defaults and max-height would get some linting for those missing time units seems a reasonable expectation. This would require some logic and list traversing in the mixin, but seems worth it to me.

Thoughts?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions