Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass multiple transitions mixin
// Usage: @include transition(width, height 0.3s ease-in-out);
// Output: -webkit-transition(width 0.2s, height 0.3s ease-in-out);
// transition(width 0.2s, height 0.3s ease-in-out);
//
// Pass in any number of transitions
@mixin transition($transitions...) {
$unfoldedTransitions: ();
@each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
}
-webkit-transition: $unfoldedTransitions;
transition: $unfoldedTransitions;
}
@function unfoldTransition ($transition) {
// Default values
$property: all;
$duration: .2s;
$easing: null; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist
$unfoldedTransition: ();
@for $i from 1 through length($defaultProperties) {
$p: null;
@if $i <= length($transition) {
$p: nth($transition, $i)
} @else {
$p: nth($defaultProperties, $i)
}
$unfoldedTransition: append($unfoldedTransition, $p);
}
@return $unfoldedTransition;
}
@farskid

This comment has been minimized.

Copy link

farskid commented Jun 8, 2016

This is exactly what I wanted for months. The last search with full of disappointment led me here. Thanks a lot for the cleverness.

@dimitrieh

This comment has been minimized.

Copy link

dimitrieh commented Jan 3, 2017

Awesome stuff!

@donalathuman

This comment has been minimized.

Copy link

donalathuman commented Feb 22, 2017

Works perfectly, thank you!

@aglaganov

This comment has been minimized.

Copy link

aglaganov commented Mar 7, 2017

Great! Thank you!

@tdhartwick

This comment has been minimized.

Copy link

tdhartwick commented Dec 10, 2017

This is perfect! Thanks!!

@sgromkov

This comment has been minimized.

Copy link

sgromkov commented Mar 6, 2020

Great job! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.