Sha256: 5386538d756be70f8644664581534953997505fd8631e9c4d129736491549ef8
Contents?: true
Size: 1.01 KB
Versions: 33
Compression:
Stored size: 1.01 KB
Contents
/// Creates a sliding animation.
/// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
/// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`.
/// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
@function slide(
$state: in,
$direction: up,
$amount: 100%
) {
$from: $amount;
$to: 0;
$func: 'translateY';
@if $direction == left or $direction == right {
$func: 'translateX';
}
@if $state == out {
$from: 0;
$to: $amount;
}
@if $direction == down or $direction == right {
@if $state == in {
$from: -$from;
}
} @else {
@if $state == out {
$to: -$to;
}
}
$keyframes: (
name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}',
0: (transform: '#{$func}(#{$from})'),
100: (transform: '#{$func}(#{$to})'),
);
@return $keyframes;
}
Version data entries
33 entries across 33 versions & 4 rubygems