Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular iOS style animation
// 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 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%); }
}
.ui-view-container {
position: relative;
}
[ui-view].ng-enter {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
@include translate3d(100%, 0, 0);
@include animation-name(slideInFromRight);
@include animation-duration($transition-duration);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
[ui-view].ng-enter-active {
-webkit-transform:scale3d(1, 1, 1);
-moz-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
@include translate3d(0, 0, 0);
}
[ui-view].ng-leave {
opacity: 1;
@include animation-name(slideOutToRight);
@include animation-duration($transition-duration);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
@include transition(all ease-in-out $transition-duration);
position: absolute;
@include translate3d(-100%, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment