animation-mixins.scss

//example usage fade in and out
.modal-dialog-container {
  $animprop: opacity 1 0;
  $transition: all 0.2s linear;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  // Custom animation styles
  @include optly--animate($animprop, $transition);
}

//example usage multiple directions
li {
  //$properties: left 0 100% -100%, left 0 -100% 100%;
  $properties: transform translateX(0) translateX(100%) translateX(-100%), transform translateX(0) translateX(-100%) translateX(100%);
  $transition: all 0.5s linear;
  $classes: anim-left anim-right;
  @include optly--animate--opposite($properties, $transition, $classes);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



//Properties are the css property, show value, hide value -- ex. opacity 1 0
@mixin optly--animate($properties, $transition, $enter: true, $leave: true) {

  &.optly-hide {
    display: none!important;
  }
  
  @if ($enter == true) {
    &.anim-enter {
      @if (type-of(nth($properties, 1)) == list) {
        @each $val in $properties {
          $property: nth($val, 1);
          $hide-value: nth($val, 3);
          
          #{$property}: $hide-value;
        }
      } @else {
        $property: nth($properties, 1);
        $hide-value: nth($properties, 3);
  
        #{$property}: $hide-value;
      }
      transition: $transition;
    }
    
    &.enter {
      @if (type-of(nth($properties, 1)) == list) {
        @each $val in $properties {
          $property: nth($val, 1);
          $show-value: nth($val, 2);
  
          #{$property}: $show-value;
        }
      } @else {
        $property: nth($properties, 1);
        $show-value: nth($properties, 2);
  
        #{$property}: $show-value;
      }
    }
  }
  
  @if ($leave == true) {
  
    &.anim-leave {
      @if (type-of(nth($properties, 1)) == list) {
        @each $val in $properties {
          $property: nth($val, 1);
          $show-value: nth($val, 2);
  
          #{$property}: $show-value;
        }
      } @else {
        $property: nth($properties, 1);
        $show-value: nth($properties, 2);
  
        #{$property}: $show-value;
      }
      transition: $transition;
    }
  
    &.leave {
      @if (type-of(nth($properties, 1)) == list) {
        @each $val in $properties {
          $property: nth($val, 1);
          $hide-value: nth($val, 3);
          
          #{$property}: $hide-value;
        }
      } @else {
        $property: nth($properties, 1);
        $hide-value: nth($properties, 3);
  
        #{$property}: $hide-value;
      }
    }
  }
}

/* Example Usage
**
**
* $properties: transform translateX(0) translateX(100%) translateX(-100%), transform translateX(0) translateX(-100%) translateX(100%);
* $classes: move-left move-right;
* $transition: all 0.5s linear;

* .box {
*   @include optly--animate--opposite($properties, $transition, $classes);
* }
*/

@mixin optly--animate--opposite($properties, $transition, $classes) {

  &.optly-hide {
    display: none!important;
  }
  
  @for $i from 1 through length($classes) {
    $class: nth($classes, $i);
    $property: nth($properties, $i);
  
    &.#{$class} {
      &.anim-enter {
        @if (type-of(nth($property, 1)) == list) {
          @each $val in $property {
            $prop-name: nth($property, 1);
            $hide-value: nth($property, 3);
            
            #{$prop-name}: $hide-value;
          }
        } @else {
          $prop-name: nth($property, 1);
          $hide-value: nth($property, 3);
          
          #{$prop-name}: $hide-value;
        }
        transition: $transition;
      }
      
      &.enter {
        @if (type-of(nth($property, 1)) == list) {
          @each $val in $property {
            $prop-name: nth($val, 1);
            $show-value: nth($val, 2);
    
            #{$prop-name}: $show-value;
          }
        } @else {
          $prop-name: nth($property, 1);
          $show-value: nth($property, 2);
    
          #{$prop-name}: $show-value;
        }
      }
    
  
    
      &.anim-leave {
        @if (type-of(nth($property, 1)) == list) {
          @each $val in $property {
            $prop-name: nth($val, 1);
            $show-value: nth($val, 2);
    
            #{$prop-name}: $show-value;
          }
        } @else {
          $prop-name: nth($property, 1);
          $show-value: nth($property, 2);
    
          #{$prop-name}: $show-value;
        }
        transition: $transition;
      }
    
      &.leave {
        @if (type-of(nth($property, 1)) == list) {
          @each $val in $property {
            $prop-name: nth($val, 1);
            $hide-value: nth($val, 4);
            
            #{$prop-name}: $hide-value;
          }
        } @else {
          $prop-name: nth($property, 1);
          $hide-value: nth($property, 4);
    
          #{$prop-name}: $hide-value;
        }
      }
      
    } //end class wrapper
  } // end for loop
} // end @mixin