Skip to content

Instantly share code, notes, and snippets.

@subudeepak
Created March 21, 2014 14:53
Show Gist options
  • Save subudeepak/9687987 to your computer and use it in GitHub Desktop.
Save subudeepak/9687987 to your computer and use it in GitHub Desktop.
My nganimate for ngview
.view-animate {
padding:10px;
}
.view-animate.ng-enter, .view-animate.ng-leave {
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.view-animate.ng-enter {
opacity: 0;
top: -50px;
height: 0px;
}
.view-animate.ng-leave{
opacity: 1;
top: 0;
height: 30px;
}
.view-animate.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
height: 30px;
}
.view-animate.ng-leave.ng-leave-active {
opacity: 0;
top: -50px;
height: 0px;
}
@subudeepak
Copy link
Author

Copied mainly from (now modified plunker) http://plnkr.co/edit/ngdoc:example-ngView-directive@snapshot?p=preview

but effect is good

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment