Transitions WIP #1202

Closed
wants to merge 2 commits into
from

Projects

None yet

3 participants

@mirisuzanne
Member

I updated the basic browser support matrix, and removed the crazy-old webkit workaround. I also removed the old code for prefixing transitioned properties, because it was over-simplistic.

It would be nice to add that back in, with a more robust approach, but I couldn't figure out a way to make it happen. Help, @chriseppstein or @scottdavis ?

I did update the tests, so they fail currently, but should pass if you get it working. I also updated $transitionable-prefixed-values so it shows a list of values and the prefixes that should be applied to them.

@robwierzbowski

What's the desired prefixing behavior? I will gladly help any patch with a 5/1 deletions/additions ratio.

@mirisuzanne
Member

$transitionable-prefixed-values should contain all the details. It's a nested list of properties and the prefixes required for each property. For example, the first value (transform ms webkit) means when I do this:

.transition {
  @include transition(transform 300ms);
}

It should output this:

.transition {
  -webkit-transition: -webkit-transform 300ms;
  transition: -ms-transform 300ms;
  transition: transform: 300ms;
}

Does that make sense?

@robwierzbowski

Sure does. Code forthcoming.

@robwierzbowski

Spent some time in the code and understand the situation now. I can do this as a one off in transitions, but it might be better to add an experimental-property-value() mixin to the experimental() and experimental-value() mixins in _shared.scss. Something like:

@mixin experimental-property-value($property, $value, [$prefixes]...) {
  ...
}

where each $prefixes is $prefix-property $prefix-value. Usage would be:

.test {
  @include experimental-property-value(
    transition, 
    transform, 
    webkit webkit, default ms, default default);
}

If we add this, experimental() and experimental-value() could be simple wrappers to experimental-property-value(). Thoughts?

@mirisuzanne
Member

I do like the idea of doing it generically. I'm not sure I understand the full extent of the proposal, but I'd love to see it. :)

@robwierzbowski

Alright, coming up!

@robwierzbowski

Well that got a little messy, but the code is up now.

@chriseppstein
Member

I rewrote this file as part of 1.0. Would love it if you would review the code and let me know if there's any issues.

@robwierzbowski

I haven't looked at 1.0 yet in depth so the patterns aren't really familiar to me, but looks much cleaner than what we had. Code comments are A+ #1. Ship it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment