Sha256: c99e0a84cab92696eda2f4323fb1c34cebb49e0120e326c41110fef3c9911817
Contents?: true
Size: 1.68 KB
Versions: 33
Compression:
Stored size: 1.68 KB
Contents
/// Creates a hinge transition by rotating the element.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
/// @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-hinge (
$state: in,
$from: left,
$axis: edge,
$perspective: 2000px,
$turn-origin: from-back,
$fade: map-get($motion-ui-settings, hinge-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
$hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
@include transition-start($state) {
@include transition-basics($duration, $timing, $delay);
@include -mui-keyframe-get($hinge, 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($hinge, 100);
@if $fade {
opacity: if($state == in, 1, 0);
}
}
}
Version data entries
33 entries across 33 versions & 4 rubygems