diff --git a/app/assets/javascripts/darkswarm/darkswarm.js.coffee b/app/assets/javascripts/darkswarm/darkswarm.js.coffee index fc6f9dfed4..1e58fe7294 100644 --- a/app/assets/javascripts/darkswarm/darkswarm.js.coffee +++ b/app/assets/javascripts/darkswarm/darkswarm.js.coffee @@ -6,6 +6,7 @@ window.Darkswarm = angular.module("Darkswarm", ["ngResource", 'angular-flash.service', 'templates', 'ngSanitize', + 'ngAnimate', 'google-maps', 'duScroll', ]).config ($httpProvider, $tooltipProvider, $locationProvider, $anchorScrollProvider) -> diff --git a/app/assets/stylesheets/darkswarm/animations.sass b/app/assets/stylesheets/darkswarm/animations.sass index fc1db55bb5..fec649e55a 100644 --- a/app/assets/stylesheets/darkswarm/animations.sass +++ b/app/assets/stylesheets/darkswarm/animations.sass @@ -28,3 +28,26 @@ filter: alpha(opacity = 50) opacity: .5 +.animate-repeat + line-height: 40px + list-style: none + box-sizing: border-box + +.animate-repeat.ng-move, +.animate-repeat.ng-enter, +.animate-repeat.ng-leave + -webkit-transition: all linear 0.5s + transition: all linear 0.5s + +.animate-repeat.ng-leave.ng-leave-active, +.animate-repeat.ng-move, +.animate-repeat.ng-enter + opacity: 0 + max-height: 0 + +.animate-repeat.ng-leave, +.animate-repeat.ng-move.ng-move-active, +.animate-repeat.ng-enter.ng-enter-active + opacity: 1 + max-height: 40px + diff --git a/app/views/home/_hubs.html.haml b/app/views/home/_hubs.html.haml index a7c61f92c4..50b491644d 100644 --- a/app/views/home/_hubs.html.haml +++ b/app/views/home/_hubs.html.haml @@ -21,7 +21,7 @@ .row{bindonce: true} .small-12.columns .active_table - %hub.active_table_node.row{"ng-repeat" => "hub in filteredHubs = (hubs | hubs:query)", + %hub.active_table_node.row.animate-repeat{"ng-repeat" => "hub in filteredHubs = (hubs | hubs:query)", "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !hub.active, 'current' : current()}", "scroll-after-load" => true, "ng-controller" => "HubNodeCtrl",