Introduction
In this section we will learn about list animation in Windows 8. Add or delete an item in a list and searching - add or delete items in a list. In this example use the createAddToListAnimation and createDeleteFromListAnimation functions and all their parameters. These animations are used to add an item to or delete an item from a one-dimensional list. Use the buttons below to either add or delete an item at the top of the list. These animations are used to very quickly add or delete items in a one-dimensional list. This is most commonly used with search results.
So, we use the following steps to make this application.
Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> JavaScript-> Windows Metro Style -> Application
- Rename this Application
![homepage.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with, default.html and js file.
![solutionexplorer.gif]()
Step 3 : Open the default.html page and add the following code. The code will look as shown below.
Code : default.html page.
<!DOCTYPE html>
<html>
<head>
<title>List Animations</title>
<!-- WinJS references -->
<link rel="stylesheet" type="text/css" href="winjs/css/ui-light.css" />
<script type="text/javascript" src="winjs/js/base.js"></script>
<script type="text/javascript" src="winjs/js/ui.js"></script>
<script type="text/javascript" src="winjs/js/animations.js"></script>
<script type="text/javascript" src="winjs/js/wwaapp.js"></script>
<!-- Base references -->
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<script type="text/javascript" src="base-sdk.js"></script>
<!-- references -->
<link rel="stylesheet" type="text/css" href="css/program.css" />
<script type="text/javascript" src="program.js"></script>
</head>
<body role="application" style="background-color:#00ff90">
<div id="rootGrid">
<div id="header" role="contentinfo"></div>
<div id="content">
<h1 id="featureLabel">List Animations</h1>
<h2 id="inputLabel">Input</h2>
<div id="input" role="main" aria-labelledby="inputLabel">
<div class="options">
<h3 id="listLabel">Select Items</h3>
<select size="3" id="Items" aria-labelledby="listLabel" style="background-color:#ffd800">
<option selected="selected" value="1" style="color:#f00">1. Add or delete an item in a list</option>
<option value="2" style="color:#ff6a00">2. Searching - add or delete items in a list</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">Description</h3>
<!-- Item 1 Input -->
<div class="item" id="Item1Input">
<p>Use the createAddToListAnimation and createDeleteFromListAnimation functions and all their parameters. These
animations are used to add an item to or delete an item from a one-dimensional list.</p>
<p>Use the buttons below to either add or delete an item at the top of the list.</p>
<button class="action" id="Item1Add">Add an item</button>
<button class="action" id="Item1Delete">Delete an item</button>
<br /><br />
</div>
<!-- Item 2 Input -->
<div class="item" id="Item2Input">
<p>Use the createAddToSearchListAnimation and createDeleteFromSearchListAnimation functions and all their
parameters. These animations are used to very quickly add or delete items in a
one-dimensional list. This is most commonly used with search results.</p>
<p>Use the button below to either add a series of items to the list or delete all items from the list.</p>
<button id="Item2Add">Add items</button>
<button id="Item2Delete">Delete items</button><br /><br />
</div>
</div>
</div>
<h2 id="outputLabel">Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage"></div>
<!-- Item 1 Output -->
<div class="item" id="Item1Output">
<p>Click on a button to add an item to or delete an item from the list.</p>
<div id="Item1List">
<div class="Item1ListItem"></div>
</div>
</div>
<!-- Item 2 Output -->
<div class="item" id="Item2Output">
<p>Click on the button.</p>
<div id="Item2List" ></div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 4 : After applying this code, run this application and then we get the following output:
![output.gif]()
On Button click add an item from the list.
![output1.1.gif]()
Click on button and delete an item from the list.
![output1.2.gif]()
Add or delete items in a list.
![output2.gif]()
Delete an items from list.
![output2.1.gif]()