jak ustawić i wyzwolić przejście css z javascript

Jestem nowy w html5, css i javascript, a przede wszystkim właśnie się bawię. Co chcę zrobić, to ustawić i wywołać przejście div. Po załadowaniu strony mogę to zrobić, ustawiając przejście. Ale to nie jest bardzo dynamiczne i nie wydaje się właściwą drogą. Jestem wdzięczny za wszelką pomocjak ustawić i wyzwolić przejście css z 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>

Źródło

2012-07-12 user1520481

Co chcesz powiedzieć, z którym chcesz się połączyć klasy didLoad raz? chcesz go zaimplementować lub przekształcić? w javascript nie można "zadzwonić" do klasy html ...? – gabeio

Okey, więc chcę zrobić to zrobić mój div z tłem img, obrócić po załadowaniu strony. Ale wydaje się dziwne, że muszę zadeklarować przejście w ciele. Tak więc chcę wywołać już zadeklarowane przejście na moim div. Ponadto jestem w przeglądarce Safari. – user1520481

Może coś takiego:

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

Źródło

2012-07-12 11:16:23

Dzięki za odpowiedź! jednak nic się nie dzieje, gdy zastępuję mój wiersz kodu twoim kodem. Jakieś pomysły? Jestem w przeglądarce Safari – user1520481

Sprawdź w konsoli debugowania, czy nie występują błędy. Czy dodałeś linię w swojej funkcji onLoad? –

bez błędów, używam przeglądarki internetowej Safari i konsoli błędów. Tak, tylko zastąpiłem document.getElementById ("dialPointer"). Style.webkitTransform = "rotate (110deg)"; z document.getElementById ("dialPointer"). ClassName + = "didLoad"; – user1520481

Możesz dodać swoją klasę do elementu, gdy chcesz za pomocą poniższego JavaScript:

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

Or prawdopodobnie lepiej, jeśli chcesz zagwarantować obsługę wielu przeglądarek, używając jQuery w ten sposób:

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

Edit:

Zobacz fiddle tutaj, które Przetestowałem w Chrome i Safari na Windows. Musiałem skomentować kod przejścia w stylu dialPointer i przenieść go do klasy didLoad. Zmieniłem również obraz tła na wypełnienie, aby działał w skrzypcach.

Źródło

2012-07-12 11:16:44

Potrzebujesz miejsca na początku łańcucha podczas dodawania klasy, inaczej nie zadziała, jeśli jest już inna klasa. –

Ups. Dziękuję za wskazanie tego. –

Ahha! miły! czy to możliwe, że nie może przejść, jeśli div jest już obrócony? – user1520481

Sposób wyzwalania przejść polega na dopasowaniu elementu do selektora CSS. Najprostszym sposobem na to jest przypisanie przejścia do klasy, a następnie dodanie tej klasy za pomocą Javascript. Więc w przykładzie:

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

a wybrany element będzie animować. (Używałem w tym standardzie kompilacji Javascript, ale nie będzie działać na starszych przeglądarkach, więc zostawię to, aby to działało).

Aby zmusić go do animacji na stronie obciążenia, umieścić go w przypadku obciążenia:

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

Źródło

2012-07-12 11:25:21

Dzięki za odpowiedź, próbowałem zastąpić document.getElementById ("dialPointer"). Style.webkitTransform = "obróć (110deg)"; z document.getElementById ("dialPointer"). ClassList.add ('didLoad'); ale potem nic się nie dzieje, może dlatego, że używam safari? – user1520481

Myślałem, że przypisałem przejście do klasy didLoad. inaczej mógłbyś mi pokazać, jak to zrobić? – user1520481

jak ustawić i wyzwolić przejście css z javascript

Odpowiedz

Powiązane problemy