Mixin Sass / Compass ManyTransitions

Capacidade de adicionar várias transições com o mesmo tempo e atenuação:

Mixin

@mixin manyTransitions( $list, $time, $easing ) {
$transitions
: ();

@each $transition in $list {
$trans
: unquote( "#{$transition} #{$time} #{$easing}" );
$transitions
: append( $transitions, $trans, comma );
}

@include transition( #{$transitions} );

}

Usar

.myclass {
@include manyTransitions( ( height, padding, top ), .25s, ease );
}

Resultado

.myclass {
-webkit-transition: height 0.25s ease, padding 0.25s ease, top 0.25s ease;
-moz-transition: height 0.25s ease, padding 0.25s ease, top 0.25s ease;
-o-transition: height 0.25s ease, padding 0.25s ease, top 0.25s ease;
transition
: height 0.25s ease, padding 0.25s ease, top 0.25s ease;
}