0

estoy intentanto lograr que una imagen (particularmente una ruleta), gire mediante css/javascript, para una aplicacion hecha en Jquery mobile y empaquetada en phonegap. Con el codigo que tengo, en pc, gira perfectamente, pero a la hora de instalarla en el celular, no lo hace. Alguna solucion? Les dejo el codigo:

var imgruleta = document.getElementById('imgruleta');
girar.on('tap', function() {
	girar.hide();
	  imgruleta.style.animationName = '';
	  setTimeout(function(){
		  imgruleta.className = 'hacergirar';
		  imgruleta.style.transform = 'rotate(8000deg)';
		  /*imgruleta.style.animationName = 'girar';*/},500)
	if(!primeraEjecucion){
		resultado.text('');
	}
	primeraEjecucion = false;
	cont++;
	var pos;
	do{
		pos = Math.floor(Math.random() * vComidas.length);
	}while(pos == actual || pos == 0)
	actual = pos;
	verIngr.hide();
	setTimeout(function() {
		resultado.text(vComidas[pos].plato);
		resultado.show(); 
		girar.show()
		girar.val("Girar de nuevo!");
		girar.button("refresh");
		imgruleta.style.transform = '';
		imgruleta.className = '';

		$('#ver main').html('');
		
		if(vComidas[pos].ingredientes.length > 0){
			verIngr.show();
			var h3= $('<h3></h3>');
			h3.text(vComidas[pos].plato);
			$('#ver main').append(h3);
			var divlista = $('<div id="divingr" data-role="listview"></div>');
			var p;
			var hr;
			/*var ul = $('<ul data-role="listview"></ul>');
			var li;*/
			for(var i in vComidas[pos].ingredientes)
			{
				p = $('<p class="listaingr"></p>');
				p.text(vComidas[pos].ingredientes[i]);
				hr = $('<hr />');
				divlista.append(p);
				divlista.append(hr);
			}
			$('#ver main').append(divlista);
			//divlista('refresh');
			div.listview().listview('refresh');
		}
		else{
			verIngr.hide();
		}
    },5500);
	
});
.hacergirar{
	transition: 5s cubic-bezier(.31,.89,.49,.99);
}
  	<main role="main" class="ui-content" >
	<img src="recursos/imagenes/ruleta2.png" alt="ruleta decididora" id="imgruleta" />
	<p id="platoelegido"></p>
	<input type="button" value="Girar!" />
	<a href="#ver" id="veringr" data-role="button" data-iconshadow="false">Ver ingredientes</a>
	</main>

1
  • Disculpa, dice que girar no esta definido, si miras tu mismo ejemplo aqui en la pagina te aparece el 7 mar. 2017 a las 0:10

1 respuesta 1

1

Bueno, pude replicar tu ejemplo, y pude ver que la funcion girar la estas invocando, pero no esta creada, tampoco se por que usas ese girar.hide(), ya que tampoco veo ese método, de igual forma aquí te dejo la imagen girando.

var imgruleta = document.getElementById('imgruleta');
var btn_girar = document.getElementById('btn_girar');

btn_girar.addEventListener("click", function(){
    girar();
});

function girar(){
		
		imgruleta.style.animationName = '';
	  setTimeout(function(){
		  imgruleta.className = 'hacergirar';
		  imgruleta.style.transform = 'rotate(8000deg)';
		  /*imgruleta.style.animationName = 'girar';*/},500)
	if(!primeraEjecucion){
		resultado.text('');
	}
	primeraEjecucion = false;
	cont++;
	var pos;
	do{
		pos = Math.floor(Math.random() * vComidas.length);
	}while(pos == actual || pos == 0)
	actual = pos;
	verIngr.hide();
	setTimeout(function() {
		resultado.text(vComidas[pos].plato);
		resultado.show(); 
		girar.show()
		girar.val("Girar de nuevo!");
		girar.button("refresh");
		imgruleta.style.transform = '';
		imgruleta.className = '';

		$('#ver main').html('');
		
		if(vComidas[pos].ingredientes.length > 0){
			verIngr.show();
			var h3= $('<h3></h3>');
			h3.text(vComidas[pos].plato);
			$('#ver main').append(h3);
			var divlista = $('<div id="divingr" data-role="listview"></div>');
			var p;
			var hr;
			/*var ul = $('<ul data-role="listview"></ul>');
			var li;*/
			for(var i in vComidas[pos].ingredientes)
			{
				p = $('<p class="listaingr"></p>');
				p.text(vComidas[pos].ingredientes[i]);
				hr = $('<hr />');
				divlista.append(p);
				divlista.append(hr);
			}
			$('#ver main').append(divlista);
			//divlista('refresh');
			div.listview().listview('refresh');
		}
		else{
			verIngr.hide();
		}
    },5500);
	

}
.hacergirar{
	transition: 5s cubic-bezier(.31,.89,.49,.99);
}
<main role="main" class="ui-content" >
	<img src="recursos/imagenes/ruleta2.png" alt="ruleta decididora" id="imgruleta" />
	<p id="platoelegido"></p>
	<input type="button" value="Girar!" id="btn_girar" />
	<a href="#ver" id="veringr" data-role="button" data-iconshadow="false">Ver ingredientes</a>
	</main>

2
  • 1
    Gracias, la imagen ya giraba perfectamente, el problema era que lo estaba testeando en una versión vieja de android y no lo reconocía. Testee el mismo código en una versión mas nueva y anduvo a la perfección. Desde ya muchas gracias de todas formas!
    – Cecilia
    el 8 mar. 2017 a las 2:16
  • Me alegra, siempre es bueno probar las cosas en diferentes versiones, ya que eso puede ser un problema, lo mismo es a la hora de probar una pagina, hay que hacerlo en varios navegadores. el 8 mar. 2017 a las 3:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.