如何設置和觸發來自javascript的css轉換

我是新來的HTML5，CSS和JavaScript，而且大多數時候我一直在玩。我想要做的是設置和觸發div的轉換。加載頁面後，我設法通過設置轉換來完成此操作。但是，這並不是很有活力，並且看起來並不正確。我感謝所有幫助如何設置和觸發來自javascript的css轉換

<!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>

來源

2012-07-12 user1520481

什麼是你想與你想調用一次類didLoad在說什麼？你想實施它還是改造它？在JavaScript中你不能「調用」一個HTML類...？ – gabeio 2012-07-12 11:40:47

Okey，所以想要我想做的是讓我的div與背景img，加載頁面後旋轉。但是我不得不在體內宣佈過渡，這似乎很奇怪。所以我想觸發一個已經宣佈過渡我的div。另外，我在Safari瀏覽器上。 – user1520481 2012-07-12 12:24:53

也許是這樣的：

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

來源

2012-07-12 11:16:23

感謝您的迴應！儘管當我用你的代碼替換我的一行代碼時沒有任何反應。有任何想法嗎？我在Safari瀏覽器上瀏覽 – user1520481 2012-07-12 12:16:31

檢查調試控制檯是否有錯誤。你是否在onLoad函數中添加了該行？ – 2012-07-12 12:37:37

沒有錯誤，我使用safari的網絡檢查器和錯誤控制檯。是的，我只替換了document.getElementById（「dialPointer」）。style.webkitTransform =「rotate（110deg）」; with document.getElementById（「dialPointer」）。className + =「didLoad」; – user1520481 2012-07-12 12:46:02

可以，只要你想你的類添加到元素使用下面的JavaScript：

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

或者可以說更好，如果你想保證跨瀏覽器的支持，使用這樣的jQuery：

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

編輯：

見fiddle在這裏，我在Chrome和Safari瀏覽器已經測試在Windows上。我必須將dialPointer風格中的轉換代碼註釋掉，並將其移至didLoad類。我也用填充替換了你的背景圖像，讓它在小提琴中工作。

來源

2012-07-12 11:16:44

添加類時，您需要在字符串的起始處有一個空格，否則，如果已經有另一個類，則該字符串將不起作用。 – 2012-07-12 11:27:18

糟糕。感謝您指出了這一點。 – 2012-07-12 11:27:49

Ahha！太好了！那麼它是否可以，它不能過渡，如果div已經旋轉？ – user1520481 2012-07-12 13:24:17

觸發轉換的方式是使元素與CSS選擇器匹配。最簡單的方法是將轉換分配給一個類，然後使用Javascript添加該類。所以在你的例子中：

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

和你選擇的元素會動畫。（我已經使用Javascript標準來讚揚Javascript，但它在舊版瀏覽器中無法使用，所以我會留給你來讓它工作）。

得到它的動畫在頁面加載，把它放在一個負載事件：

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

來源

2012-07-12 11:25:21

感謝您的迴應，我試着替換document.getElementById（「dialPointer」）。style.webkitTransform =「rotate（110deg）」;與document.getElementById（'dialPointer'）。classList一起使用。加（ 'didLoad'）;但然後沒有任何反應，可能是因爲我使用Safari瀏覽器？ – user1520481 2012-07-12 12:12:53

我以爲我已經分配了向類didLoad的轉換。否則，請你告訴我該怎麼做？ – user1520481 2012-07-12 12:37:28

如何設置和觸發來自javascript的css轉換

回答

相關問題