/// Applies basic transition settings to an element. /// @param {Duration} $duration [null] - Length (speed) of the transition. /// @param {Keyword|Function} $timing [null] - Easing of the transition. /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. @mixin transition-basics(
$duration: null, $timing: null, $delay: null
) {
@include -motion-ui-defaults; transition-duration: $duration; transition-timing-function: $timing; transition-delay: $delay;
}
/// Wraps the content in the setup class for a transition. /// @param {Keyword} $dir - State to setup for transition. @mixin transition-start($dir) {
$selector: -mui-build-selector(map-get($motion-ui-states, $dir)); @at-root { #{$selector} { @content; } }
}
/// Wraps the content in the active class for a transition. /// @param {Keyword} $dir - State to activate a transition on. @mixin transition-end($dir) {
$selector: -mui-build-selector(map-get($motion-ui-states, $dir), true); @at-root { #{$selector} { @content; } }
}
/// Adds styles for a stagger animation, which can be used with Angular’s ‘ng-repeat`. /// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item’s animation. @mixin stagger($delay-amount) {
transition-delay: $delay-amount; transition-duration: 0; // Prevent accidental CSS inheritance
}