Skip to content

Instantly share code, notes, and snippets.

@anonymoussc

anonymoussc/README.md

Created August 2, 2015 15:41
Show Gist options
  • Save anonymoussc/fdf9710cfe26b70a8243 to your computer and use it in GitHub Desktop.
Save anonymoussc/fdf9710cfe26b70a8243 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS ngModel and form animation
Raw
README.md

##AngularJS ngModel and form animation

Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ngModel and form animation</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div>
<form>
<input ng-model="ngModelSample" ng-pattern="/^\d+$/" class="inputSample"/>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var app = angular.module('myApp', ['ngAnimate']);
Raw
style.css
/* ngModel animation */
.inputSample.ng-invalid-add {
-webkit-transition : 1s linear all;
-moz-transition : 1s linear all;
-o-transition : 1s linear all;
-ms-transition : 1s linear all;
transition : 1s linear all;
color : black;
}
.inputSample.ng-invalid {
color : red;
}
.inputSample.ng-invalid-add-active {
color : red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment