スライド表示するアニメーションを実装する

display: noneで非表示になっている要素をスライドダウンで表示させたいということがあったので、JavaScriptを使ってスライド表示する実装を試してみました。

サンプルコード

まずはHTMLです。
スライドのアニメーションのため、表示/非表示を切り替える要素はdivの入れ子にしています。

<button id="btn">表示 / 非表示</button>
<div id="outer">
	<div id="inner">
		リゼ・ヘルエスタ<br>
		ヘルエスタ王国の第二皇女。文武両道学園主席、真面目で誰にでも優しくかなりの人望がある。<br>
		王位継承の資格者として日々鍛錬や人とのコミュニケーションを大事にしている。
	</div>
</div>

次にCSSですが、#innerにdisplay: none、その親要素の#outerにスライドアニメーション用にoverflow: hiddenを設定します。

#outer {
	overflow: hidden;
}
#inner {
	display: none;
}

最後にJavaScriptです。
インナー要素をdisplay: blockにして、overflow: hiddenの設定されているアウターの高さを変更してスライド処理を行うようにします。

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var speed = 500;

document.getElementById('btn').addEventListener('click', function() {
	if(inner.style.display !== 'block') {
		slide_down_init();
	} else {
		slide_up_init();
	}
}, false);

/**
 * スライドダウン時の設定
 */
function slide_down_init() {
	inner.style.display = 'block';
	var ah = inner.clientHeight;
	outer.style.height = 0 + 'px';
	slide(outer, 0, ah, speed);
}

/**
 * スライドアップ時の設定
 */
function slide_up_init() {
	var bh = inner.clientHeight;
	outer.style.height = bh + 'px';
	slide(outer, bh, 0, speed);
	setTimeout(function() {
		inner.style.display = 'none';
	}, speed);
}

/**
 * スライド処理の実行
 * @param {object} element - 省略する行数
 * @param {number} start - スライド開始位置
 * @param {number} end - スライド終了位置
 * @param {number} speed - スライド処理のスピード
 */
function slide(element, start, end, speed) {
	var counter = 0;
	var per = Math.abs(end - start) / (speed / 10);
	var slideTimer = setInterval(function() {
		counter++;
		element.style.height = Math.abs(start - per * counter) + 'px';
		if(counter >= (speed / 10)) {
			clearInterval(slideTimer);
			element.style.height = 'auto';
		}
	}, 10);
}

これで意図した動作を実装できました。
JavaScriptでスライド処理をするデモページ