_animations.scss

/**
 * Animations
 * --------------------------------------------------
 * The animations in this file are "simple" - not too complex
 * and pretty easy on performance. They can be overidden
 * and enhanced easily.
 */

$transition-duration: 250ms;
$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);


/**
 * Keyframes
 * --------------------------------------------------
 */

// Slide In From The Bottom To The Top
// -------------------------------

@-webkit-keyframes slideInUp {
  0%   { -webkit-transform: translate3d(0, 100%, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInUp {
  0%   { -moz-transform: translate3d(0, 100%, 0); }
  100% { -moz-transform: translate3d(0, 0, 0); }
}
@keyframes slideInUp {
  0%   { transform: translate3d(0, 100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


// Slide Out From The Top To Bottom
// -------------------------------

@-webkit-keyframes slideOutUp {
  0%   { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(0, 100%, 0); }
}
@-moz-keyframes slideOutUp {
  0%   { -moz-transform: translate3d(0, 0, 0); }
  100% { -moz-transform: translate3d(0, 100%, 0); }
}
@keyframes slideOutUp {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}


// Slide In From Left
// -------------------------------

@-webkit-keyframes slideInFromLeft {
    from { -webkit-transform: translate3d(-100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromLeft {
    from { -moz-transform: translateX(-100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}


// Slide In From Right
// -------------------------------

@-webkit-keyframes slideInFromRight {
    from { -webkit-transform: translate3d(100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slideInFromRight {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}


// Slide Out To Left
// -------------------------------

@-webkit-keyframes slideOutToLeft {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(-100%, 0, 0); }
}
@-moz-keyframes slideOutToLeft {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(-100%); }
}
@keyframes slideOutToLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}


// Slide Out To Right
// -------------------------------

@-webkit-keyframes slideOutToRight {
  from { -webkit-transform: translate3d(0, 0, 0); }
  to { -webkit-transform: translate3d(100%, 0, 0); }
}
@-moz-keyframes slideOutToRight {
  from { -moz-transform: translateX(0); }
  to { -moz-transform: translateX(100%); }
}
@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}


// Fade Out
// -------------------------------

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-moz-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


// Fade In
// -------------------------------

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


// Fade Half In
// -------------------------------

@-webkit-keyframes fadeInHalf {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}
@-moz-keyframes fadeInHalf {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}
@keyframes fadeInHalf {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.5); }
}


// Fade Half Out
// -------------------------------

@-webkit-keyframes fadeOutHalf {
  from { background-color: rgba(0,0,0,0.5); }
  to { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes fadeOutHalf {
  from { background-color: rgba(0,0,0,0.5); }
  to { background-color: rgba(0,0,0,0); }
}
@keyframes fadeOutHalf {
  from { background-color: rgba(0,0,0,0.5); }
  to { background-color: rgba(0,0,0,0); }
}

// Scale Out
// Scale from hero (1 in this case) to zero
// -------------------------------

@-webkit-keyframes scaleOut {
  from { -webkit-transform: scale(1); opacity: 1; }
  to { -webkit-transform: scale(0.8); opacity: 0; }
}
@-moz-keyframes scaleOut {
  from { -moz-transform: scale(1); opacity: 1; }
  to { -moz-transform: scale(0.8); opacity: 0; }
}
@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

// Scale In
// Scale from 0 to hero (1 in this case)
// -------------------------------

@-webkit-keyframes scaleIn {
  from { -webkit-transform: scale(0); }
  to { -webkit-transform: scale(1); }
}
@-moz-keyframes scaleIn {
  from { -moz-transform: scale(0); }
  to { -moz-transform: scale(1); }
}
@keyframes scaleIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

// Super Scale In
// Scale from super (1.x) to duper (1 in this case)
// -------------------------------

@-webkit-keyframes superScaleIn {
  from { -webkit-transform: scale(1.2); opacity: 0; }
  to { -webkit-transform: scale(1); opacity: 1 }
}
@-moz-keyframes superScaleIn {
  from { -moz-transform: scale(1.2); opacity: 0; }
  to { -moz-transform: scale(1); opacity: 1; }
}
@keyframes superScaleIn {
  from { transform: scale(1.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

// Spin
// -------------------------------

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  100% { -moz-transform: rotate(360deg); }
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

.no-animation {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    @include transition(none);
  }
}
.noop-animation {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-duration);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}


// required for Android
.ng-animate .pane {
  position: absolute;
}


/**
 * Slide Left-Right, and Right-Left, each with the reserve
 * --------------------------------------------------
 * NEW content slides IN from the RIGHT, OLD slides OUT to the LEFT
 * Reverse: NEW content slides IN from the LEFT, OLD slides OUT to the RIGHT
 */

.slide-left-right,
.slide-right-left.reverse {
  > .ng-enter, &.ng-enter,
  > .ng-leave, &.ng-leave {
    @include transition(all ease-in-out $transition-duration);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    @include translate3d(100%, 0, 0);
  }
  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
    /* NEW content ACTIVELY sliding IN from the RIGHT */
    @include translate3d(0, 0, 0);
  }
  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
    /* OLD content ACTIVELY sliding OUT to the LEFT */
    @include translate3d(-100%, 0, 0);
  }
}

.slide-left-right.reverse,
.slide-right-left {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    @include transition(all ease-in-out $transition-duration);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
    @include translate3d(-100%, 0, 0);
  }
  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
    /* NEW content ACTIVELY sliding IN from the LEFT */
    @include translate3d(0, 0, 0);
  }
  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
    /* OLD content ACTIVELY sliding OUT to the RIGHT */
    @include translate3d(100%, 0, 0);
  }
}


/**
 * iOS7 style slide left to right
 * --------------------------------------------------
 */
$ios7-timing-function: ease-in-out;
$ios7-transition-duration: 250ms;

.slide-left-right-ios7,
.slide-right-left-ios7.reverse {
  > .ng-enter, &.ng-enter,
  > .ng-leave, &.ng-leave {
    @include transition(all $ios7-timing-function $ios7-transition-duration);
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    left: -1px;
    width: auto;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far RIGHT BEFORE it slides IN from the RIGHT */
    @include translate3d(100%, 0, 0);
  }
  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
    /* NEW content ACTIVELY sliding IN from the RIGHT */
    @include translate3d(0, 0, 0);
  }
  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
    /* OLD content ACTIVELY sliding OUT to the LEFT */
    @include translate3d(-15%, 0, 0);
  }
}
.slide-left-right-ios7.reverse,
.slide-right-left-ios7 {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    @include transition(all $ios7-timing-function $ios7-transition-duration);
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    left: -1px;
    width: auto;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
  }
  > .ng-enter, &.ng-enter {
    /* NEW content placed far LEFT BEFORE it slides IN from the LEFT */
    @include translate3d(-100%, 0, 0);
  }
  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
    /* NEW content ACTIVELY sliding IN from the LEFT */
    @include translate3d(0, 0, 0);
  }
  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
    /* OLD content ACTIVELY sliding OUT to the RIGHT */
    @include translate3d(15%, 0, 0);
  }
}



.slide-in-left {
  @include translate3d(0%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideInFromLeft);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideOutToLeft);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
}


.slide-in-left-add {
  @include translate3d(100%,0,0);
  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
}
.slide-in-left-add-active {
  @include animation-name(slideInFromLeft);
}

.slide-out-left {
  @include translate3d(-100%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideOutToLeft);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideOutToLeft);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
}

.slide-out-left {
}

.slide-out-left-add {
  @include translate3d(0,0,0);
  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
}
.slide-out-left-add-active {
  @include animation-name(slideOutToLeft);
}

.slide-in-right {
  @include translate3d(0%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideInFromRight);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideInFromRight);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
}

.slide-in-right-add {
  @include translate3d(-100%,0,0);
  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
}
.slide-in-right-add-active {
  @include animation-name(slideInFromRight);
}

.slide-out-right {
  @include translate3d(100%,0,0);
  &.ng-enter, > .ng-enter {
    @include animation-name(slideOutToRight);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
  &.ng-leave, > .ng-leave {
    @include animation-name(slideOutToRight);
    @include animation-duration($transition-duration);
    @include animation-timing-function(ease-in-out);
    @include animation-fill-mode(both);
  }
}

.slide-out-right-add {
  @include translate3d(0,0,0);
  @include animation-duration($transition-duration);
  @include animation-timing-function(ease-in-out);
  @include animation-fill-mode(both);
}
.slide-out-right-add-active {
  @include animation-name(slideOutToRight);
}


/**
 * Slide up from the bottom, used for modals
 * --------------------------------------------------
 */

.slide-in-up {
  @include translate3d(0, 100%, 0);
}
.slide-in-up.ng-enter,
.slide-in-up > .ng-enter {
  @include transition(all $slide-in-up-function 400ms);
}
.slide-in-up.ng-enter-active,
.slide-in-up > .ng-enter-active {
  @include translate3d(0, 0, 0);
}

.slide-in-up.ng-leave,
.slide-in-up > .ng-leave {
  @include transition(all ease-in-out 250ms);
}


.fade-in {
  @include animation(fadeOut 0.3s);
  &.active {
    @include animation(fadeIn 0.3s);
  }
}

.fade-in-not-out {
  &.ng-enter, .ng-enter {
    @include animation(fadeIn 0.3s);
    position: relative;
  }
  &.ng-leave, .ng-leave {
    display: none;
  }
}


/**
 * Some component specific animations
 */
$nav-title-slide-ios7-delay: 250ms;
.nav-title-slide-ios7 {
  > .ng-enter, &.ng-enter,
  > .ng-leave, &.ng-leave {
    @include transition(all $nav-title-slide-ios7-delay);
    @include transition-timing-function($ios7-timing-function);
    opacity: 1;
  }
  > .ng-enter, &.ng-enter {
    @include translate3d(30%, 0, 0);
    opacity: 0;
  }
  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
    @include translate3d(0, 0, 0);
    opacity: 1;
  }
  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
    @include translate3d(-30%, 0, 0);
    opacity: 0;
  }

  &.reverse {
    > .ng-enter, &.ng-enter,
    > .ng-leave, &.ng-leave {
      @include transition(all ease-in-out $transition-duration);
      opacity: 1;
    }
    > .ng-enter, &.ng-enter {
      @include translate3d(-30%, 0, 0);
      opacity: 0;
    }
    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
      @include translate3d(0, 0, 0);
      opacity: 1;
    }
    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
      @include translate3d(30%, 0, 0);
      opacity: 0;
    }
  }
}