Skip to content

Instantly share code, notes, and snippets.

@rbinsztock

rbinsztock/angular-animation-tutorial.js

Created August 21, 2014 08:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rbinsztock/21e6ac3afdfd295edccb to your computer and use it in GitHub Desktop.
Save rbinsztock/21e6ac3afdfd295edccb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
angular-animation-tutorial.js
// In index.html we have...
<body>
<div ng-view class="{{animateStyle}}">
</div>
</body>
// Which allows us to apply page transition animations. So, for example, to slide left from page A to page B we
// write javascript
or
<body>
<div ng-view ng-class="{'slide-left' : moveToNext, 'slide-right' : moveToPrevious }">
</div>
</body>
with class :
scope.animationStyle = "slide-left"
with ng-class :
scope.moveToNext = true;
scope.moveToPrevious = false;
// which applies the css class slide-left to that div, together with ng-enter for the new div content and ng-leave for
.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
-ms-transition: .25s ease-in-out;
-webkit-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.slide-left.ng-enter {
z-index: 101;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave {
z-index: 100;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
// ...and also
.slide-right.ng-enter {
z-index: 100;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave {
z-index: 101;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment