Generated by SassMeister.com.

SassMeister-input.scss

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

.my-div {
  /*transition css*/
 &.ng-hide {
    &.ng-hide-remove,
    &.ng-hide-add {
      /* override ng-hide's display:none while only while animating. */
      display: block !important;
    }
  }

  /* Hiding the modal/form. */
  &.ng-hide-add {
    /* Start hiding. */
    opacity: 1;
    /* @include translate3d(0, 0, 0); */

    &.ng-hide-add-active {
      /* End hiding. */
      opacity: 0;
      /* @include translate3d(0, 0, 20px); */
      // Disable Z axis translate on mobile
    }
  }

  // Showing the modal/form.
  &.ng-hide-remove {
    /* Start showing. */
    opacity: 0;
    /* @include translate3d(0, 0, 20px); */

    
    &.ng-hide-remove-active {
      /* End showing. */
      opacity: 1;
      /* @include translate3d(0,0,0); */
    }
  } 
}

SassMeister-output.css

.my-div {
  /*transition css*/
  /* Hiding the modal/form. */
}
.my-div.ng-hide.ng-hide-remove, .my-div.ng-hide.ng-hide-add {
  /* override ng-hide's display:none while only while animating. */
  display: block !important;
}
.my-div.ng-hide-add {
  /* Start hiding. */
  opacity: 1;
  /* @include translate3d(0, 0, 0); */
}
.my-div.ng-hide-add.ng-hide-add-active {
  /* End hiding. */
  opacity: 0;
  /* @include translate3d(0, 0, 20px); */
}
.my-div.ng-hide-remove {
  /* Start showing. */
  opacity: 0;
  /* @include translate3d(0, 0, 20px); */
}
.my-div.ng-hide-remove.ng-hide-remove-active {
  /* End showing. */
  opacity: 1;
  /* @include translate3d(0,0,0); */
}