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

Okey、バックグラウンドimgでdivを作って、ページをロードした後にローテーションしたいと思っています。しかし、私は体内の移行を宣言しなければならないのは奇妙に思えます。だから私は私の部門に既に宣言された移行をトリガーしたい。また、私はサファリブラウザ上にいる。 – user1520481

に感謝していますこのような何か：

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

出典

2012-07-12 11:16:23

お返事ありがとうございます！コードの行をコードに置き換えても何も起こりません。何か案は？私はサファリWebブラウザにいます – user1520481

デバッグコンソールでエラーがないかチェックしてください。 onLoad関数内に行を追加しましたか？ –

エラーはありません。私はSafariのWebインスペクタとエラーコンソールを使用しています。ええ、私はdocument.getElementById（ "dialPointer"）だけを置き換えました。style.webkitTransform = "rotate（110deg）"; とdocument.getElementById（ "dialPointer"）。className + = "didLoad"; – user1520481

次のJavaScriptを使用していつでもあなたは要素にクラスを追加することができます。

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

かjQueryを次のように使用して、ブラウザ間のサポートを保証したい場合は、間違いなく良いでしょう。

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

編集：

私はWindows上でChromeとSafariでテストしてみたここfiddleを参照してください。 dialPointerスタイルのトランジションコードをコメントアウトして、didLoadクラスに移動しなければなりませんでした。私はまた、あなたの背景イメージをフィールで置き換えるために塗りつぶしに置き換えました。

出典

2012-07-12 11:16:44

クラスを追加するときに文字列の先頭にスペースが必要です。別のクラスが既に存在する場合は動作しません。 –

それを指摘してくれてありがとう。 –

Ahha！いいよ！ divが既にローテーションされていれば、遷移することはできません。 – user1520481

トランジションをトリガーする方法は、エレメントをCSSセレクターに一致させることです。これを行う最も簡単な方法は、トランジションをクラスに割り当て、次にそのクラスをJavascriptを使用して追加することです。あなたの例では：

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

あなたが選んだ要素がアニメーション化されます。（これはJavascriptの標準を使用していますが、古いブラウザでは機能しませんので、動作させるために残しておきます）。

loadイベントに入れて、それがページの読み込み時にアニメーションを取得する：

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'）。クラスリスト。add（ 'didLoad'）;私はサファリを使用しているので何も起こりません。 – user1520481

私はクラスdidLoadへの移行を割り当てたと思った。それ以外の方法を教えてもらえますか？ – user1520481

JavaScriptのCSSトランジションを設定してトリガーする方法

答えて

関連する問題