##AngularJS ngRepeat animation
Created
July 27, 2015 06:12
-
-
Save anonymoussc/5d8e69f468fbe4630885 to your computer and use it in GitHub Desktop.
AngularJS ngRepeat animation
This file contains 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
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS ngRepeat animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div ng-controller="animationsCtrl"> | |
| <div> | |
| <div ng-repeat="item in items" class="repeatItem"> | |
| {{item.name}} | |
| </div> | |
| <button ng-click="addItem()">Add item</button> | |
| <button ng-click="removeItem()">Remove item</button> | |
| <button ng-click="sortItems()">Sort items</button> | |
| </div> | |
| </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> |
This file contains 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 app = angular.module('myApp', ['ngAnimate']); | |
| app.controller('animationsCtrl', function ($scope) { | |
| $scope.items = [ | |
| { | |
| name : 'Richard' | |
| }, | |
| { | |
| name : 'Bruno' | |
| }, | |
| { | |
| name : 'Jobson' | |
| } | |
| ]; | |
| $scope.counter = 0; | |
| $scope.addItem = function () { | |
| var name = 'Item' + $scope.counter++; | |
| $scope.items.push({ | |
| name : name | |
| }); | |
| }; | |
| $scope.removeItem = function () { | |
| var length = $scope.items.length; | |
| var indexRemoved = Math.floor(Math.random() * length); | |
| $scope.items.splice(indexRemoved, 1); | |
| }; | |
| $scope.sortItems = function () { | |
| $scope.items.sort(function (a, b) { | |
| return a[name] < b[name] ? -1 : 1 | |
| }); | |
| }; | |
| }); |
This file contains 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
| /* ngRepeat animation*/ | |
| /* ngRepeat ng-enter animation */ | |
| .repeatItem.ng-enter { | |
| -webkit-animation : 1s ng-enter-repeat-animation; | |
| -moz-animation : 1s ng-enter-repeat-animation; | |
| -ms-animation : 1s ng-enter-repeat-animation; | |
| -o-animation : 1s ng-enter-repeat-animation; | |
| animation : 1s ng-enter-repeat-animation; | |
| } | |
| @-webkit-keyframes ng-enter-repeat-animation { | |
| from { | |
| opacity : 0; | |
| color : red; | |
| } | |
| to { | |
| opacity : 1; | |
| color : black; | |
| } | |
| } | |
| @-moz-keyframes ng-enter-repeat-animation { | |
| from { | |
| opacity : 0; | |
| color : red; | |
| } | |
| to { | |
| opacity : 1; | |
| color : black; | |
| } | |
| } | |
| @-ms-keyframes ng-enter-repeat-animation { | |
| from { | |
| opacity : 0; | |
| color : red; | |
| } | |
| to { | |
| opacity : 1; | |
| color : black; | |
| } | |
| } | |
| @-o-keyframes ng-enter-repeat-animation { | |
| from { | |
| opacity : 0; | |
| color : red; | |
| } | |
| to { | |
| opacity : 1; | |
| color : black; | |
| } | |
| } | |
| @keyframes ng-enter-repeat-animation { | |
| from { | |
| opacity : 0; | |
| color : red; | |
| } | |
| to { | |
| opacity : 1; | |
| color : black; | |
| } | |
| } | |
| /* ngRepeat ng-move animation */ | |
| .repeatItem.ng-move { | |
| -webkit-animation : 1s ng-move-repeat-animation; | |
| -moz-animation : 1s ng-move-repeat-animation; | |
| -ms-animation : 1s ng-move-repeat-animation; | |
| -o-animation : 1s ng-move-repeat-animation; | |
| animation : 1s ng-move-repeat-animation; | |
| } | |
| @-webkit-keyframes ng-move-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0.5; | |
| color : blue; | |
| } | |
| } | |
| @-moz-keyframes ng-move-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0.5; | |
| color : blue; | |
| } | |
| } | |
| @-ms-keyframes ng-move-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0.5; | |
| color : blue; | |
| } | |
| } | |
| @-o-keyframes ng-move-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0.5; | |
| color : blue; | |
| } | |
| } | |
| /* ngRepeat ng-leave animation */ | |
| .repeatItem.ng-leave { | |
| -webkit-animation : 1s ng-leave-repeat-animation; | |
| -moz-animation : 1s ng-leave-repeat-animation; | |
| -ms-animation : 1s ng-leave-repeat-animation; | |
| -o-animation : 1s ng-leave-repeat-animation; | |
| animation : 1s ng-leave-repeat-animation; | |
| } | |
| @-webkit-keyframes ng-leave-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0; | |
| color : red; | |
| } | |
| } | |
| @-moz-keyframes ng-leave-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0; | |
| color : red; | |
| } | |
| } | |
| @-ms-keyframes ng-leave-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0; | |
| color : red; | |
| } | |
| } | |
| @-o-keyframes ng-leave-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0; | |
| color : red; | |
| } | |
| } | |
| @keyframes ng-leave-repeat-animation { | |
| from { | |
| opacity : 1; | |
| color : black; | |
| } | |
| to { | |
| opacity : 0; | |
| color : red; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment