Animate height change for applists

index.html

@@ -80,7 +80,7 @@ <h2>Examples</h2>
 							<p class="applist-intro">
 								These are examples written in pure JavaScript.
 							</p>
-							<ul class="applist js">
+							<ul class="js-app-list-inner applist js">
 								<li class="routing">
 									<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
 								</li>
@@ -127,7 +127,7 @@ <h2>Examples</h2>
 								These are applications written in programming
 								languages that compile to JavaScript.
 							</p>
-							<ul class="applist js">
+							<ul class="js-app-list-inner applist js">
 								<li class="routing">
 									<a href="architecture-examples/spine/" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a>
 								</li>
@@ -162,7 +162,7 @@ <h2>Examples</h2>
 								These are examples written in JavaScript that
 								we are still evaluating.
 							</p>
-							<ul class="applist js">
+							<ul class="js-app-list-inner applist js">
 								<li class="routing">
 									<a href="labs/architecture-examples/backbone_marionette/" data-source="http://marionettejs.com" data-content="Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.">MarionetteJS</a>
 								</li>

site-assets/main.css

@@ -129,6 +129,7 @@ header nav a:not(:last-child) {
 	font-size: 17px;
 	display: flex;
 	flex-wrap: wrap;
+	transition: height .5s ease-in-out;
 }
 
 .applist li {

site-assets/main.js

@@ -186,24 +186,50 @@
 	function AppTabs() {
 		document.querySelector(AppTabs.selectors.tabs).addEventListener(
 			'core-select', this.onSelect.bind(this));
+		this.listHeight = 0;
 	}
 
 	AppTabs.selectors = {
-		'tabs': '.js-app-tabs',
-		'list': '.js-app-list'
+		tabs: '.js-app-tabs',
+		list: '.js-app-list',
+		innerList: '.js-app-list-inner'
 	};
 
 	AppTabs.prototype.onSelect = function (e) {
 		var selected = e.target.selected;
 		[].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach(
-			function (e) {
-				var isSelected = e.dataset.appList === selected;
-				e.style.display = isSelected ? 'block' : 'none';
-				e.classList.toggle('anim-swoosh-in', isSelected);
-			}
+			function (el) {
+				if (!e.detail.isSelected) {
+					// Don't handle unselection events.
+					return;
+				}
+
+				var isSelected = el.dataset.appList === selected;
+				el.style.display = isSelected ? 'block' : 'none';
+				el.classList.toggle('anim-swoosh-in', isSelected);
+				if (isSelected) {
+					this.adjustHeight(el);
+				}
+			}.bind(this)
 		);
 	};
 
+	AppTabs.prototype.adjustHeight = function (e) {
+		var list = e.querySelector(AppTabs.selectors.innerList);
+		list.style.height = this.listHeight + 'px';
+		var $clone = $(list)
+			.clone()
+			.css({ visibility: 'hidden' })
+			.height('auto')
+			.appendTo(list.parentElement);
+
+		window.requestAnimationFrame(function () {
+			var naturalHeight = this.listHeight = $clone.outerHeight();
+			$clone.remove();
+			list.style.height = naturalHeight + 'px';
+		}.bind(this));
+	};
+
 	new AppTabs();
 
 }());