kkirsche/AngularJS-List-Animation.markdown

## AngularJS-List-Animation.markdown

      
    Raw
  

              AngularJS-List-Animation.markdown
            
          
    AngularJS List Animation

We are using ngAnimate / $animate service for AngularJS to slide a list item out from the above list item similar to list animations on the iPhone.
This AngularJS List Animation application is a Pen by R4z3r on CodePen.
License.

  
## index.html
<html ng-app="animationApp">
  <head>
    <title>CodePen AngularJS Animation</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
 <script src="https://code.angularjs.org/1.3.0/angular-animate.min.js"></script>
</head>
  <body ng-controller="AnimationCtrl">
    <div class="container">
      <div class="row" style="margin-top: 15px;">
        <form ng-submit="addItem(itemName, itemSnippet)">
          <input type="text" class="col-md-4" ng-model="itemName">
          <input type="text" class="col-md-4 col-md-offset-1" ng-model="itemSnippet">
          <button type="submit" class="btn btn-primary col-md-2 col-md-offset-1">Submit</button>
      </div>
      <div class="row" style="margin-top: 15px;">
        <ul class="list-unstyled">
          <li ng-animate="'animate'" ng-repeat="phone in listItems" class="item">
            <span>{{phone.name}}</span>
            <p>{{phone.snippet}}</p>
           </li>
  </ul>
      </div>
  </body>
</html>

## script.js
var phonecatApp = angular.module('animationApp', ['ngAnimate']);

phonecatApp.controller('AnimationCtrl', ["$scope", "$animate",function ($scope, $animate) {
  $scope.listItems = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];

  $scope.addItem = function(itemName, itemSnippet) {
    var item = {'name': itemName,
                'snippet': itemSnippet};
    $scope.listItems.push(item);
  };
}]);

## style.css
.item {
  background-color: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #777;
  padding-left: 10px;
  padding-top: 10px;
}
.item:nth-child(even) {
  border-width: 0 1px 0.09em 1px;
}

.item.ng-enter,
.item.ng-leave
{
	-webkit-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
    -moz-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
    -ms-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
    -o-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
    transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
    position: relative;
    display: block;
}

.item.ng-enter,
.item.ng-leave.ng-leave-active {
	-webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    height: 0px;
    opacity: 0;
}

.item.ng-leave,
.item.ng-enter.ng-enter-active {
	-webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    height: 30px;
    opacity: 1;
}
	<html ng-app="animationApp">
	<head>
	<title>CodePen AngularJS Animation</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.3.0/angular-animate.min.js"></script>
	</head>
	<body ng-controller="AnimationCtrl">
	<div class="container">
	<div class="row" style="margin-top: 15px;">
	<form ng-submit="addItem(itemName, itemSnippet)">
	<input type="text" class="col-md-4" ng-model="itemName">
	<input type="text" class="col-md-4 col-md-offset-1" ng-model="itemSnippet">
	<button type="submit" class="btn btn-primary col-md-2 col-md-offset-1">Submit</button>
	</div>
	<div class="row" style="margin-top: 15px;">
	<ul class="list-unstyled">
	<li ng-animate="'animate'" ng-repeat="phone in listItems" class="item">
	<span>{{phone.name}}</span>
	<p>{{phone.snippet}}</p>
	</li>
	</ul>
	</div>
	</body>
	</html>
	var phonecatApp = angular.module('animationApp', ['ngAnimate']);

	phonecatApp.controller('AnimationCtrl', ["$scope", "$animate",function ($scope, $animate) {
	$scope.listItems = [
	{'name': 'Nexus S',
	'snippet': 'Fast just got faster with Nexus S.'},
	{'name': 'Motorola XOOM™ with Wi-Fi',
	'snippet': 'The Next, Next Generation tablet.'},
	{'name': 'MOTOROLA XOOM™',
	'snippet': 'The Next, Next Generation tablet.'}
	];

	$scope.addItem = function(itemName, itemSnippet) {
	var item = {'name': itemName,
	'snippet': itemSnippet};
	$scope.listItems.push(item);
	};
	}]);
	.item {
	background-color: #eee;
	border-width: 1px;
	border-style: solid;
	border-color: #777;
	padding-left: 10px;
	padding-top: 10px;
	}
	.item:nth-child(even) {
	border-width: 0 1px 0.09em 1px;
	}

	.item.ng-enter,
	.item.ng-leave
	{
	-webkit-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
	-moz-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
	-ms-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
	-o-transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
	transition: 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000) all;
	position: relative;
	display: block;
	}

	.item.ng-enter,
	.item.ng-leave.ng-leave-active {
	-webkit-transform: scaleY(0);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	transform: scaleY(0);
	height: 0px;
	opacity: 0;
	}

	.item.ng-leave,
	.item.ng-enter.ng-enter-active {
	-webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	transform: scaleY(1);
	height: 30px;
	opacity: 1;
	}