AngularJS - Sass - Animating the height of an ng-if to achieve an expanding/collapsing effect. To animate ng-show/hide, see: http://codepen.io/kmaida/pen/QwgddQ

animated-ng-if.scss

.animated-ng-if {
	&.ng-enter {
		transition: max-height 350ms ease-in;	/* transition the height FROM 0 to x when entering (autoprefix or use mixin) */
		max-height: 0;
	}
	&.ng-enter.ng-enter-active,
	&.ng-leave {
		max-height: 600px;	/* max-height when active (adjust value to fit needs) */
	}
	&.ng-leave.ng-leave-active {
		max-height: 0;	/* height when collapsed */
	}
	&.ng-leave {
		transition: max-height 350ms ease-out;	/* transition the height FROM x to 0 when leaving */
	}
}