Created
February 28, 2014 04:38
-
-
Save cscottmills/9265347 to your computer and use it in GitHub Desktop.
An SCSS mixin to sequence the transitions of a known number of elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Cascade | |
// $count accepts any whole number > 1 | |
// $delay & $duration accept values in seconds | |
// NB you'll need to handle vendor prefixes yourself | |
// -------------------------- | |
@mixin cascade($count, $property, $delay: 0s, $duration: 0.2s, $timing: ease) { | |
transition-property: $property; | |
transition-timing-function: $timing; | |
@for $i from 1 through $count { | |
&:nth-child(#{$i}) { | |
transition-delay: $delay + (($i - 1) / 100); | |
transition-duration: $duration + (($i - 1) / 100); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Toggle the 'torrential' class on the <ul> --> | |
<ul class="torrential"> | |
<li>Crash</li> | |
<li>Whoosh</li> | |
<li>Tumble</li> | |
<li>Swish</li> | |
<li>Riffle</li> | |
<li>Sigh</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
li { | |
// $count has to match or exceed the number of elements you're cascading | |
@include cascade(6, all); | |
transform: translateY(-50%); | |
opacity: 0; | |
.torrential & { | |
transform: translateY(0); | |
opacity: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's a demonstration: https://codepen.io/cscottmills/pen/AKLtn