Sha256: 040f3b108047fca2dbc4952c0e4c132160b6b80d0245b6e7b44e0144cddb492f
Contents?: true
Size: 1.53 KB
Versions: 8
Compression:
Stored size: 1.53 KB
Contents
/// Creates a sliding transition by translating the element horizontally or vertically.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Keyword} $direction [null] - Direction to slide to. Can be `up`, `right`, `down`, or `left`. By default `left` and `right` for `in` and `out` states respectively.
/// @param {Length} $amount [100%] - Length of the slide as a percentage value.
/// @param {Boolean} $fade [false] - 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-slide (
$state: in,
$direction: null,
$amount: 100%,
$fade: map-get($motion-ui-settings, slide-and-fade),
$duration: null,
$timing: null,
$delay: null
) {
$direction: if($direction != null, $direction, if($state == in, left, right));
$slide: slide($state, $direction, $amount);
// CSS Output
@include transition-start($state) {
@include transition-basics($duration, $timing, $delay);
@include -mui-keyframe-get($slide, 0);
@if $fade {
transition-property: transform, opacity;
opacity: if($state == in, 0, 1);
} @else {
transition-property: transform, opacity;
}
backface-visibility: hidden;
}
@include transition-end($state) {
@include -mui-keyframe-get($slide, 100);
@if $fade {
opacity: if($state == in, 1, 0);
}
}
}
Version data entries
8 entries across 8 versions & 2 rubygems