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;
}
Written by Antonio Lettieri
Related protips
1 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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Sass
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#