cómo configurar y activar una transición css desde javascript

Soy nuevo en html5, css y javascript, y sobre todo he estado jugando. Lo que quiero hacer es establecer y activar una transición de un div. Después de que se carga la página, logro hacer eso estableciendo una transición. Pero eso no se siente muy dinámico y no parece el camino correcto a seguir. Estoy agradecido por cualquier ayudacómo configurar y activar una transición css desde javascript

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     body{ 
      text-align: center; 
     } 

     #dialPointer 
     { 
      position:relative; 
      margin-left: auto; 
      margin-right: auto; 
      width:23px; 
      height:281px; 
      background:url(pointer.png); 
      background-size:100% 100%; 
      background-repeat:no-repeat; 

      transform: rotate(-150deg); 
      transition-duration: 2s; 
      transition-delay: 2s; 

      -webkit-transform: rotate(-150deg); 
      -webkit-transition-duration:2s; 
      -webkit-transition-delay: 2s; 
     } 


     /* I want to call this once */ 
     .didLoad 
     { 
      width:23px; 
      height:281px; 
      transform:rotate(110deg); 
      -moz-transform:rotate(110deg); /* Firefox 4 */ 
      -webkit-transform:rotate(110deg); /* Safari and Chrome */ 
      -o-transform:rotate(110deg); /* Opera */ 
     } 

     </style> 
</head> 

<body> 
    <div id="dialPointer"></div> 
    <script language="javascript" type="text/javascript"> 
     window.onload=function() { 
      //But instead of using rotate(110deg), I would like to call "didLoad" 

      document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)"; 


     }; 
     </script> 
</body> 
</html>

Fuente

2012-07-12 user1520481

¿Qué está tratando de decir con la que desea llamar didLoad clase una vez? ¿Quieres implementarlo o transformarlo? en javascript no puedes "llamar" a una clase html ...? – gabeio

Okey, así que quiero hacer es hacer mi div con un fondo img, rotar después de cargar la página. Pero parece extraño que deba declarar la transición en el cuerpo. Entonces quiero activar una transición ya declarada en mi div. Además, estoy en el navegador safari. – user1520481

Tal vez algo como esto:

document.getElementById("dialPointer").className += "didLoad";

Fuente

2012-07-12 11:16:23

¡Gracias por la respuesta! aunque nada sucede cuando reemplazo mi fila de código con tu código. ¿Algunas ideas? Estoy en el navegador web safari – user1520481

Compruebe la consola de depuración para ver si hay errores. ¿Ha agregado la línea dentro de su función onLoad? –

sin errores, estoy usando el inspector web de safari y la consola de error. Sí, solo reemplacé document.getElementById ("dialPointer"). Style.webkitTransform = "rotar (110deg)"; con document.getElementById ("dialPointer"). ClassName + = "didLoad"; – user1520481

Usted puede añadir su clase al elemento cada vez que desee utilizar el siguiente JavaScript:

document.getElementById("dialPointer").className += " didLoad";

O podría decirse que es mejor, si desea garantizar el soporte entre navegadores, usando jQuery como este:

$(function() { 
// Handler for .ready() called. 
$('#dialPointer').addClass('didLoad'); 
});

Editar:

Ver fiddle aquí, que he probado en Chrome y Safari en Windows. Tuve que comentar el código de transición en el estilo dialPointer y moverlo a su clase didLoad. También reemplacé tu imagen de fondo con un relleno para que funcione en el violín.

Fuente

2012-07-12 11:16:44

Necesita un espacio al comienzo de la cadena al agregar la clase, o no funcionará si ya hay otra clase. –

Vaya. Gracias por señalar eso. –

¡Ahha! ¡bonito! podría ser entonces, que no puede hacer la transición, si el div ya está en rotación? – user1520481

La manera de activar las transiciones es hacer que un elemento coincida con el selector de CSS. La manera más fácil de hacerlo es asignarle la transición a una clase, luego agregar esa clase usando Javascript. Por lo tanto, en su ejemplo:

document.getElementById('dialPointer').classList.add('didLoad');

y su elemento elegido se animará. (He usado estándares para cumplimentar Javascript para esto, pero no funcionará en navegadores más antiguos, así que dejo que usted lo haga funcionar).

Para conseguirlo para animar al cargar la página, lo puso en un evento de carga:

window.addEventListener('load', function() { 
    document.getElementById('dialPointer').classList.add('didLoad'); 
});

Fuente

2012-07-12 11:25:21

Gracias por la respuesta, traté de reemplazar document.getElementById ("dialPointer"). Style.webkitTransform = "rotar (110deg)"; con document.getElementById ('dialPointer'). ClassList.add ('didLoad'); pero luego no pasa nada, ¿podría ser porque estoy usando safari? – user1520481

Pensé que había asignado una transición a la clase didLoad. de lo contrario, ¿podrías mostrarme cómo hacerlo? – user1520481

cómo configurar y activar una transición css desde javascript

Respuesta

Cuestiones relacionadas