Last Updated: February 25, 2016
·
1.995K
· alettieri

Sass/Compass ManyTransitions mixin

Ability to add multiple transitions with same timing and easing:

Mixin

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

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

@include transition( #{$transitions} );

}

Use

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

Output

.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;
}

1 Response
Add your response

I'm getting issues in Compass when compiling. It complains that the mixin '@include transition' doesn't exist. Which is true.

Is there a way to fix this? Can we declare empty transitions?

over 1 year ago ·