Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // These default values could be overwritten in a potentially cleaned up global config file ;-)
- $transition--easing: cubic-bezier(0.4, 0, 0.2, 1) !default
- $transition--slow: '0.2s 0.1s' !default
- $transition--fast: '0.1s' !default
- // The main mixin
- =transition($speed, $properties...)
- $transitions: ()
- // Timing is fast, unless 'slow' is specified
- $timing: $transition--fast
- @if $speed == slow
- $timing: $transition--slow
- @each $property in $properties
- $transitions: append($transitions, #{$property} #{$timing} #{$transition--easing}, comma)
- transition: $transitions
- // Convenience Functions
- // ---------------------
- // Use fast transition for small elements and
- // in-place transition
- //
- // Use slow transition for large elements and
- // transitions affecting multiple sections of
- // the view
- =fast-transition($properties...)
- +transition(fast, $properties)
- =slow-transition($properties...)
- +transition(slow, $properties)
- // Example Usage
- .element
- +fast-transition(opacity, padding)
- +slow-transition(margin)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement