Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.3)
// ----

//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

//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%;
}

SassMeister-output.css

/* 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);
* }
*/
.modal-dialog-container {
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.modal-dialog-container.optly-hide {
  display: none !important;
}
.modal-dialog-container.anim-enter {
  opacity: 0;
  transition: all 0.2s linear;
}
.modal-dialog-container.enter {
  opacity: 1;
}
.modal-dialog-container.anim-leave {
  opacity: 1;
  transition: all 0.2s linear;
}
.modal-dialog-container.leave {
  opacity: 0;
}

li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
li.optly-hide {
  display: none !important;
}
li.anim-left.anim-enter {
  transform: translateX(100%);
  transition: all 0.5s linear;
}
li.anim-left.enter {
  transform: translateX(0);
}
li.anim-left.anim-leave {
  transform: translateX(0);
  transition: all 0.5s linear;
}
li.anim-left.leave {
  transform: translateX(-100%);
}
li.anim-right.anim-enter {
  transform: translateX(-100%);
  transition: all 0.5s linear;
}
li.anim-right.enter {
  transform: translateX(0);
}
li.anim-right.anim-leave {
  transform: translateX(0);
  transition: all 0.5s linear;
}
li.anim-right.leave {
  transform: translateX(100%);
}