<style>
.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }
.loading { height: 100%; background: url(images/loading.gif) no-repeat center; }
.in { width: 100px; margin: 0 auto; border: 50px solid #beceeb; background-color: #f0f3f9; }
[type=button] { width: 100px; height: 32px; font-size: 100%; }
</style>
</head>
<body>
<div id="main">
<div id="effect" class="part">
<div class="show">
<div class="demo">
<div id="box" class="box">
</div>
<p>
<input type="button" id="button" value="點擊我">
</p>
</div>
</div>
</div>
</div>
</div>
<script>
// 高度無縫動畫方法
var funTransitionHeight = function(element, time) { // time, 數值，可缺省
if (typeof window.getComputedStyle == "undefined") return;
var height = window.getComputedStyle(element).height;
element.style.transition = "none"; // 本行2015-05-20新增，mac Safari下，貌似auto也會觸發transition, 故要none下~
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
};
(function() {
// demo演示腳本
var box = document.getElementById("box"), button = document.getElementById("button");
button.onclick = function() {
// 載入菊花，模擬loading效果
box.innerHTML = '<div class="loading"></div>';
// 隨機高度內容
setTimeout(function() {
box.innerHTML = '<div class="in" style="height:'+ Math.round(400 * Math.random()) +'px;"></div>';
funTransitionHeight(box, 250);
}, 1000);
};
// 初始高度
funTransitionHeight(box);
})();
</script>
</body>