Animate pick css transition

Gruntfile.coffee

@@ -37,6 +37,7 @@ module.exports = (grunt) ->
 		scripts: [
 			'bower_components/lodash/dist/lodash.js'
 			'bower_components/angular/angular.js'
+			'bower_components/angular-animate/angular-animate.js'
 			'bower_components/angular-sanitize/angular-sanitize.js'
 			'bower_components/angular-scroll/angular-scroll.js'
 			'bower_components/ngDialog/js/ngDialog.js'

bower.json

@@ -3,6 +3,7 @@
 	"author": "Vit Brunner",
 	"dependencies": {
 		"angular": "1.2.20",
+		"angular-animate": "1.2.20",
 		"angular-sanitize": "1.2.20",
 		"angular-scroll": "0.6.2",
 		"fontawesome": "4.2.0",

source/scripts/app.js.coffee

@@ -1,4 +1,4 @@
-angular.module('sideBySide', ['ngDialog', 'ngSanitize', 'duScroll'])
+angular.module('sideBySide', ['ngAnimate', 'ngDialog', 'ngSanitize', 'duScroll'])
 	.config [ '$locationProvider', ($locationProvider) ->
 		$locationProvider.html5Mode true
 	]

source/styles/style.css.styl

@@ -73,6 +73,7 @@ body
 	position: fixed
 	left: 0
 	bottom: 36px
+	transition: .5s linear all
 
 	width: 100%
 	.pick-in
@@ -100,6 +101,9 @@ body
 	.disabled
 		color: $neutral
 
+.pick.ng-hide
+	max-height: 0
+
 max_columns = 20
 for columns in 1 .. max_columns
 	.cols-{columns}
@@ -108,3 +112,6 @@ for columns in 1 .. max_columns
 
 			.version-padded
 				padding: 0px (100 / (5 * columns))%
+
+.ng-hide-add, .ng-hide-remove
+	display: block !important