Sha256: aaa4ce3757e54abcf79a632de69058eb252eede75a2a21a13dcaa7f7b935ce85
Contents?: true
Size: 1.55 KB
Versions: 8
Compression:
Stored size: 1.55 KB
Contents
/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Number} $from [null] - Size to start at. By default `0` and `1` for `in` and `out` states respectively.
/// @param {Number} $to [null] - Size to end at. By default `1` and `0` for `in` and `out` states respectively.
/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
/// @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 mui-zoom(
$state: in,
$from: null,
$to: null,
$fade: map-get($motion-ui-settings, scale-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
$from: if($from != null, $from, if($state == in, 0, 1));
$to: if($to != null, $to, if($state == in, 1, 0));
$scale: zoom($from, $to);
@include transition-start($state) {
@include transition-basics($duration, $timing, $delay);
@include -mui-keyframe-get($scale, 0);
@if $fade {
transition-property: transform, opacity;
opacity: if($state == in, 0, 1);
} @else {
transition-property: transform, opacity;
}
}
@include transition-end($state) {
@include -mui-keyframe-get($scale, 100);
@if $fade {
opacity: if($state == in, 1, 0);
}
}
}
Version data entries
8 entries across 8 versions & 2 rubygems