Skip to content

Instantly share code, notes, and snippets.

@davideicardi
Last active August 29, 2015 14:27
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 davideicardi/3f8678ee8cffbccb4b39 to your computer and use it in GitHub Desktop.
Save davideicardi/3f8678ee8cffbccb4b39 to your computer and use it in GitHub Desktop.
Angular ng animation (http://codepen.io/anon/pen/qdLQpe)
.myClass.ng-enter, .myClass.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 5s;
}
.myClass.ng-enter,
.myClass.ng-leave.ng-leave-active {
opacity:0;
}
.myClass.ng-leave,
.myClass.ng-enter.ng-enter-active {
opacity:1;
}
<body ng-app="test">
<div ng-controller="myCtrl">
<button ng-click="show = !show">Show/Hide with animation</button>
<div class="myClass" ng-if="show">
some content
</div>
</div>
</div>
angular.module("test", ["ngAnimate"])
.controller("myCtrl",
function($scope){
$scope.show = true;
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment