come impostare e attivare una transizione css da javascript

Sono nuovo di html5, css e javascript, e per lo più ho appena giocato in giro. Quello che voglio fare è impostare e attivare una transizione di un div. Dopo aver caricato la pagina, riesco a farlo impostando una transizione. Ma questo non sembra molto dinamico e non sembra la strada giusta da percorrere. Sono grato per qualsiasi aiutocome impostare e attivare una transizione css da 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>

fonte

2012-07-12 user1520481

Cosa stai cercando di dire con il che si desidera chiamare classe didLoad volta? vuoi implementarlo o trasformarlo? in javascript non è possibile "chiamare" una classe html ...? – gabeio

Okey, quindi voglio che io voglia fare il mio div con un'immagine di sfondo, ruotare dopo aver caricato la pagina. Ma sembra strano che io debba dichiarare la transizione nel corpo. Quindi voglio attivare una transizione già dichiarata sul mio div. Inoltre, sono su Safari Browser. – user1520481

Forse qualcosa di simile:

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

fonte

2012-07-12 11:16:23

Grazie per la risposta! anche se non succede nulla quando sostituisco la mia riga di codice con il tuo codice. Qualche idea? Sono su Safari Web browser – user1520481

Controllare la console di debug per gli errori. Hai aggiunto la linea nella tua funzione onLoad? –

no errori, sto usando Safari web inspector e error console. Sì, ho solo sostituito document.getElementById ("dialPointer"). Style.webkitTransform = "rotate (110deg)"; con document.getElementById ("dialPointer"). ClassName + = "didLoad"; – user1520481

È possibile aggiungere la classe per l'elemento ogni volta che si desidera utilizzando il seguente JavaScript:

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

Or discutibilmente meglio, se si vuole garantire il supporto cross-browser, utilizzando jQuery come questo:

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

Edit:

Vedi fiddle qui che ho testato in Chrome e Safari su Windows. Ho dovuto commentare il codice di transizione nello stile dialPointer e spostarlo nella classe didLoad. Ho anche sostituito la tua immagine di sfondo con un riempimento per farlo funzionare nel violino.

fonte

2012-07-12 11:16:44

Quando si aggiunge la classe, è necessario uno spazio all'inizio della stringa, altrimenti non funzionerà se è già presente un'altra classe. –

Oops. Grazie per la segnalazione. –

Ahha! simpatico! potrebbe essere allora, che non può passare, se il div è già ruotato? – user1520481

Il modo in cui si attivano le transizioni consiste nel far corrispondere un elemento con il selettore CSS. Il modo più semplice per farlo è assegnare la transizione a una classe, quindi aggiungere quella classe utilizzando Javascript. Quindi nel tuo esempio:

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

e l'elemento scelto verrà animato. (Ho usato gli standard complimenti Javascript per questo, ma non funzionerà con i browser più vecchi, quindi lascerò a te il compito di farlo funzionare).

Per farlo animare il caricamento della pagina, lo mise in un evento carico:

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

fonte

2012-07-12 11:25:21

Grazie per la risposta, ho provato a sostituire document.getElementById ("dialPointer"). Style.webkitTransform = "rotate (110deg)"; con document.getElementById ('dialPointer'). ClassList.aggiungere ('didLoad'); ma poi non succede nulla, potrebbe essere perché sto usando safari? – user1520481

Pensavo di aver assegnato un passaggio alla classe di didLoad. altrimenti potresti per favore mostrarmi come farlo? – user1520481

come impostare e attivare una transizione css da javascript

risposta

Problemi correlati