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.
Last active
August 29, 2015 14:08
-
-
Save kkirsche/ac9ec962b716300986f1 to your computer and use it in GitHub Desktop.
AngularJS List Animation Pen by Kevin Kirsche.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }; | |
| }]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment