Каким образом создать плавную анимацию появления блока?

Question

[CrystalClear]

Есть следующий простой код

<a href="#box" onclick="openbox('box'); return false">Открыть бокс</a>
<div id="box" style="display: none; transition-duration: width 2s;">Содержимое блока</div>

function openbox(box) {
        display = document.getElementById('box').style.display;
        if(display == "none") {
            document.getElementById('box').style.display = "block";
        } else {
            document.getElementById('box').style.display = "none";
        }
    }

Подскажите пожалуйста как сделать так что бы появление блока было анимированно

Answer 1

[Web Dentist]

$('#box').fadeIn();

UPD :
Не ленитесь гуглить.Toster предназначен для получения ответов (советов) , в тех случаях , когда в гугле по этому поводу очень мало инфы.

Answer 2

[Ihor Bratukh]

codepen.io

(function() {
	'use strict';

	setTimeout(function() {
		fadeIn(document.querySelector('.swapi'), 1500);
	}, 1000);

	function fadeIn(el, time) {
		el.style.opacity = 0;
		var last = +new Date();
		var tick = function(time) {
			el.style.opacity = +el.style.opacity + (new Date() - last) / (time || 300);
			last = +new Date();
			if (+el.style.opacity < 1) {
				(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
			}
		};
		tick(time);
	}

})()

Comments

[Ihor Bratukh]

P.S. setTimeout для того, чтобы явно увидеть результат.