Adding animations is surprisingly easy using AngularJS. The ngAnimate module of AngularJS will take users there with CSS animations.
We'll start by adding animation to our web app before porting it over to PhoneGap. To do this, head back to your web-based version of the code and open index.html. There are three changes that you need to make:
Add a new
index.cssfile.Add
class="todos" in your <div ng-view> </div>.Add
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.min.js"></script>to the list of imported JavaScript.The end result of your code in
index.htmlshould look like this:<!doctype html> <html ng-app="todoApp"> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="css/index.css"> <style> body { padding: 40px 20px 0 20px; } </style>...