Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] finalizar transition CSS saltar al final

Estas en el tema de finalizar transition CSS saltar al final en el foro de CSS en Foros del Web. Hola, ¿Alguien sabe como se puede saltar al final de una transition CSS? he intentado esto y no funciona: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original ...
  #1 (permalink)  
Antiguo 22/10/2015, 19:40
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 10 años, 10 meses
Puntos: 10
finalizar transition CSS saltar al final

Hola,
¿Alguien sabe como se puede saltar al final de una transition CSS?

he intentado esto y no funciona:
Código HTML:
Ver original
  1. <div id="contenedor">
  2. Contenido
  3. </div><br>
  4. <button id="go">go</button>
  5. <button id="go_end">go_end</button>
Código Javascript:
Ver original
  1. $('#go').off('click').on('click',function(){
  2.         $('#contenedor').css({
  3.                 '-webkit-transition': 'transform 10000ms',
  4.                 'transform': 'translate(500px, 0px)'
  5.         });
  6.     });
  7.     $('#go_end').off('click').on('click',function(){
  8.         $('#contenedor').css({
  9.                 '-webkit-transition': 'transform 0ms',
  10.                 'transform': 'translate(500px, 0px)'
  11.         });
  12.     });

O sea necesito que al pulsar el botón go_end ... el contenedor se vaya a la posición final
en este caso a 500px sin esperar la duración puesta al principio (10 segundos )
También estoy obligado (por la naturaleza del proyecto) de utilizar jquery o javascript para cambiar el atributo style. No puedo hacerlo por las etiquetas <style> con clases

Gracias
  #2 (permalink)  
Antiguo 22/10/2015, 21:40
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: finalizar transition CSS saltar al final

Solo Cambia tu 'transform': 'translate(500px, 0px)' por 'transform': 'translateY(500px)'

Demo:
http://jsfiddle.net/pLnhkqax/
  #3 (permalink)  
Antiguo 23/10/2015, 05:31
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 10 años, 10 meses
Puntos: 10
Respuesta: finalizar transition CSS saltar al final

Gracias por responder,
He probado tu fiddle y a mi no mefunciona.
No se si no funciona por culpa de mi navegador ( he probado con chrome 40 y explorer 10 para explorer he cambiado el prefijo -webkit- por -ms- )

o no has entendido bien lo que quiero.

El cambio que me sugieras es que en vez de horizontal se mueve vertical
Esto seria lo de menos ya que solo es un ejemplo

Lo que quiero es que al pulsar el primer botón (go) la transicion empieza ( y lo hace ) pero antes de terminar la transicion ( supongando que de los 500px ha llegado a 200px y le queda todavía 300px por moverse ... por esto puse 10 segundos de retraso )
Entonces al pulsar el segundo botón (go_end) quiero que el contenedor se vaya directamente a 500px y no esperar que termine la primera transicion que esta todavia sin terminar.


Pulsar el primer boton (go) y despues de 1-2-3 segundos pulsar el segundo boton ( go end )
O sea no pulsar el segundo boton ( go_end ) en primer lugar que asi claro que funciona pero no es esto lo que quiero.

No se si me has entendido

Gracias de todos modos

Última edición por matake; 23/10/2015 a las 05:43
  #4 (permalink)  
Antiguo 23/10/2015, 12:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: finalizar transition CSS saltar al final

Puedes usar SetTimeout, ¿no?
__________________
(:
  #5 (permalink)  
Antiguo 23/10/2015, 17:02
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 10 años, 10 meses
Puntos: 10
Respuesta: finalizar transition CSS saltar al final

Hola pzin no veo el sentido del setTimeout aquí.

¿como lo emplearías tu ?

De momento la unica chapuza que he conseguido que funcione es esta:

Código Javascript:
Ver original
  1. //copio el contenido del atributo style y quito -webkit-transition: transform 10000ms; con replace
  2.  
  3.         var estilo_nuevo = $('#contenedor').attr('style').replace(/-webkit-transition: transform 10000ms;/,'');
  4.  
  5.                 //aquy otra chapuza porque el regex anterior solo me quitaba el -webkit-
  6.         estilo_nuevo = estilo_nuevo.replace(/transition: transform 10000ms;/,'');
  7.  
  8.                 //pongo el nuevo estilo .... pero ojo solo funciona si previamente he borrado el contenido del atributo style sobrescribir directamente ej : $('#contenedor').attr('style',estilo_nuevo); No funciona !
  9.         $('#contenedor').attr('style','').attr('style',estilo_nuevo);

lo pongo como solucionado aunque queda como una chapuza
aquy va el ejemplo
http://jsfiddle.net/matake/yjy22sd7/

Etiquetas: finalizar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:49.