Converting div Animations-Code in Vanille JS

Question

In meinem Projekt muss ich einige Elemente animieren, ändern Sie ihre Höhe mit Animation und ich darf nicht jQuery verwenden. Ich habe harte Zeit den folgenden Code konvertieren (nur die Animation Teil) zu Vanille js:

jsfiddle

$("#button").click(function() { 
    $("#div").height(20).animate({ 
    height: 50 
    }, 200); 
}) 

Answer 1

Vanilla JS keine Animation Routinen hat. Um dies zu tun, müssen Sie Ihre eigenen Timer schreiben, um die Eigenschaften des Elements in den erforderlichen Intervallen zu aktualisieren.

jedoch eine bessere Alternative wäre die Animation in CSS zu tun und JS verwenden, um einfach eine Klasse auf das Element hinzufügen, die die Animation löst, so etwas wie diese:

document.getElementById('button').addEventListener('click', function() { 
 
    document.getElementById('div').classList.add('foo'); 
 
})

#div { 
 
    height: 20px; 
 
    width: 50px; 
 
    border: 1px solid red; 
 
    transition: height 0.2s; 
 
} 
 
#div.foo { 
 
    height: 50px; 
 
}

<div id="div"></div> 
 
<button id="button">animate height</button>

Hinweis Die transition Regel auf der #div ist, was macht die Animation Magie hier.