##AngularJS ngRepeat transition staggering
Created
August 8, 2015 22:22
-
-
Save anonymoussc/a4b3ea7bccfbadaea99f to your computer and use it in GitHub Desktop.
AngularJS ngRepeat transition staggering
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 transition staggering</title> | |
| <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div ng-controller="staggeredCtrl as stagger"> | |
| <h1>ngRepeat Transition staggering example</h1> | |
| <button ng-click="showEmailsTransitions = !showEmailsTransitions">Show/Hide email list</button> | |
| <button ng-click="stagger.archive()">Archive AngularJS emails</button> | |
| <label for="filterBy">Filter email by:</label> | |
| <input ng-model="stagger.filterBy" name="filterBy"/> | |
| <div ng-repeat="item in stagger.emails | filter:stagger.filterBy" ng-if="showEmailsTransitions" class="repeatItemTransition bg-primary"> | |
| {{item}} | |
| </div> | |
| <h1>ngRepeat Animation staggering example</h1> | |
| <button ng-click="showEmails = !showEmails">Show/Hide email list</button> | |
| <button ng-click="stagger.archive()">Archive AngularJS emails</button> | |
| <label for="animationFilterBy">Filter items by:</label> | |
| <input ng-model="stagger.animationFilterBy" name="animationFilterBy"/> | |
| <div ng-repeat="item in stagger.emails | filter:stagger.animationFilterBy" ng-if="showEmails" class="repeatItem bg-primary"> | |
| {{item}} | |
| </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
| function staggeredCtrlFn() { | |
| var stagger = this; | |
| stagger.emails = ["Contencios studere!", "Fiscinas persuadere!", "Elevatuss assimilant!", "Nunquam locus bulla.", "Medicinas persuadere!"]; | |
| stagger.archive = archiveFn; | |
| function archiveFn() { | |
| stagger.emails = ["Nunquam gratia cotta."]; | |
| } | |
| } | |
| angular.module('myApp', ['ngAnimate']) | |
| .controller('staggeredCtrl', staggeredCtrlFn); |
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*/ | |
| .repeatItemTransition.ng-enter, | |
| .repeatItemTransition.ng-leave { | |
| -webkit-transition : opacity ease-in-out 1s; | |
| -moz-transition : opacity ease-in-out 1s; | |
| -ms-transition : opacity ease-in-out 1s; | |
| -o-transition : opacity ease-in-out 1s; | |
| transition : opacity ease-in-out 1s; | |
| } | |
| .repeatItemTransition.ng-enter, | |
| .repeatItemTransition.ng-leave.ng-leave-active { | |
| opacity : 0; | |
| } | |
| .repeatItemTransition.ng-leave, | |
| .repeatItemTransition.ng-enter.ng-enter-active { | |
| opacity : 1; | |
| } | |
| .repeatItemTransition.ng-enter-stagger, | |
| .repeatItemTransition.ng-leave-stagger { | |
| /* This is the delay between each animation of the staggered animation sequence */ | |
| -webkit-transition-delay : 0.1s; | |
| -moz-transition-delay : 0.1s; | |
| -ms-transition-delay : 0.1s; | |
| -o-transition-delay : 0.1s; | |
| transition-delay : 0.1s; | |
| /* This should be set to 0s to avoid problems, this element could inherit the value from the repeatItemTransition element */ | |
| -webkit-transition-duration : 0s; | |
| -moz-transition-duration : 0s; | |
| -ms-transition-duration : 0s; | |
| -o-transition-duration : 0s; | |
| transition-duration : 0s; | |
| } | |
| .repeatItem.ng-enter-stagger, | |
| .repeatItem.ng-leave-stagger, | |
| .repeatItem.ng-move-stagger { | |
| /* This is the delay between each animation of the staggered animation sequence, now for keyframes animations */ | |
| -webkit-animation-delay : 0.2s; | |
| -moz-animation-delay : 0.2s; | |
| -o-animation-delay : 0.2s; | |
| animation-delay : 0.2s; | |
| /* This should be set to 0s to avoid problems too, this element could inherit the value from the repeatItem element */ | |
| -webkit-animation-duration : 0; | |
| -moz-animation-duration : 0; | |
| -o-animation-duration : 0; | |
| animation-duration : 0; | |
| } | |
| /* 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment