анимация в течении времени
Ребят подскажите что в функции написать чтобы изменяла высоту до 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, время: 23:50. |