slideUp w Vanilla JS

jQuery posiada w swojej bibliotece bardzo dużo przydatnych animacji. Ja w tym wpisie postaram się przedstawić rozwiązanie napisane w czystym JS, które przedstawi jak napisać funkcję slideUp() znaną z jQuery, która zmniejsza wysokość elementu do zera w zadanym odstępie czasu. 

Obecne rozwiązanie ma na celu pokazania zasady działania całości. Należałoby lepiej sprawdzać czy przekazany pierwszy parametr to element drzewa DOM. Dodatkowo należałoby sprawdzać szczególne przypadki tj. czy element ma padding czy jest pozycjonowany absolutnie/relatywnie itp. Jednak te wszystkie elementy skomplikują kod co w tym wypadku jest nie pożądane.

Poniżej zamieszczam funkcję wraz z odpowiednimi komentarzami.

/**
* Funkcja, która zmniejsza wysokość elementu HTML wprost proporcjonalnie do zadanego czasu.
*
* Pierwszy parametr to element, którego wielkość będzie zmniejszana.
* Drugi parametr to czas w milisekundach w jakim element osiągnie wysokość zero
*/
function slideUp(item, time) {
    
    //proste sprawdzenie czy to element HTML
    //należałoby to zrobić dokładniej, ale niepotrzebnie zaciemni to rozwiązanie
    if(typeof item === 'object' && typeof item.clientHeight !== 'undefined') {
        
        
        var height = item.clientHeight; // można też użyć .offsetHeight
        
        //określamy jak dokładna ma być animacja
        var intervalTime = 5;
        
        //określamy co ile ma być zmieniana wysokość
        var step = (height * intervalTime) / time;
        
        var id = setInterval(function(){
            height = height - step;
            
            //sprawdzam czy animacja się nie zakończyła
            if(height > 0) {
                //nadajemy nową wysokość
                item.style.height = height+'px';
            } else {
                //ukrywamy element
                item.style.display = 'none';
                
                //usuwamy pętlę 
                clearInterval(id);
            }
            
            console.log('interval', height);
            
        }, intervalTime);
    } else {
        console.log('Błąd! Nie mogę wykonać operacji na tym elemencie!');
    }    
}

i jeszcze przykład użycia:

document.addEventListener('DOMContentLoaded', function(){
   console.log('DOM!'); 
    
    setTimeout(function(){
        slideUp(document.querySelector('.box'), 1000);
    }, 1000)
});

Zapraszam Cię również z zapoznaniem się z szybszą implementacją animacji dzięki requestAnimationFrame()