Estoy empezando en javascript y quería realizar unas practicas usando animaciones. La consulta que tengo es que quiero enviar un parametro usando el método requestAnimationFrame(). Lo que quiero es enviar la variable primeraCaja por requestAnimationFrame() usando el método naceElemento(), ya intente de varias formas pero me da error. Si tienen recomendaciones ó algún consejo les agradeceria mucho.
var boton = document.getElementById('boton');
var dato;
var txtBox = document.getElementById('textBox');
var padre = document.getElementById('Padre');
var alto = 0, ancho = 0;
boton.addEventListener('click', function(){
dato = txtBox.value;
var primeraCaja = document.createElement('div');
var text = document.createTextNode(dato);
primeraCaja.appendChild(text);
padre.appendChild(primeraCaja);
primeraCaja.setAttribute('class', 'elementoInicial' );
requestAnimationFrame(naceElemento);
});
function naceElemento(){
if(alto<100){
alto = alto + 2;
ancho = ancho + 2;
primeraCaja.style.width = alto + 'px';
primeraCaja.style.height = ancho + 'px';
console.log(alto);
requestAnimationFrame(naceElemento);
}else{
alto = 0;
ancho = 0;
cancelAnimationFrame(requestAnimationFrame(naceElemento));
}
}
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id='Padre'>
</div>
<form>
<input id="textBox"class="input" type="number">
<input id="boton"class="sub" type="button" value="Enviar">
</form>
<script src="main.js">
</script>
</body>
</html>