анимация в течении времени
Ребят подскажите что в функции написать чтобы изменяла высоту до 0 за интервал времени
function mySlideUp(elem, time) {
var element = document.querySelector(elem);
var height = parseInt(getComputedStyle(element).height);
var count = time/height;
var step = height / count;
var timer = setInterval(function(){
var newHeight = parseInt(getComputedStyle(element).height);
newHeight = newHeight - step;
if (newHeight <= 0) clearInterval(timer);
element.style.height = newHeight + 'px';
}, 50)
}
setTimeout(function() {
mySlideUp('#box',2000)
}, 2000)
ерунда какаято получается((( |
DynkanMaclaud, так?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#block {
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div id="block"></div>
<button onclick="slideUp(document.getElementById('block'), 2000)">Жми сюда</button>
<script>
function slideUp(elem, duration) {
var begin = performance.now();
var startHeight = elem.offsetHeight;
window.requestAnimationFrame(function animate(now) {
var progress = (now - begin) / duration;
progress > 1 && (progress = 1);
elem.style.height = (startHeight) ? startHeight - startHeight * progress + 'px' : elem.style.height = progress * 256 + 'px';
progress < 1 && window.requestAnimationFrame(animate);
});
}
</script>
</body>
</html>
|
Decode,Благодарю
|
| Часовой пояс GMT +3, время: 21:36. |