teagles / VS-America.com

/// Creates a sliding transition by translating the element horizontally or vertically.
/// @param {Keyword} $state [in] - State to transition to.
/// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`.
/// @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: left,
  $amount: 100%,
  $fade: map-get($motion-ui-settings, slide-and-fade),
  $duration: null,
  $timing: null,
  $delay: null
) {
  $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);
    }
  }
}