0

スケールを .5 - 1 からアニメーション化しようとしています。div が最初に追加されたときに、css を追加して .5 にスケールし、要素 css を 1 にスケールバックします。

     $('.item').each(function(count){
        $(this).css({top: 0, left:20, transform : "scale(.5)"});
    });

CSS

.item {
  -webkit-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
     -moz-transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s;
       -o-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
      -ms-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
          transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;

  transform: scale(1) ease-in-out 0s;   
  -moz-transform: scale(1) ease-in-out 0s;
}

なぜこれが機能しないのでしょうか。.5 のままで、1 にアニメートされません

このスタイルもアニメーションしません。

-moz-transform: scale(.4) 2s ease-in-out 4s;

私はFirefoxを使用していますが、うまくいきません。または、省略形として間違って書いていますか

4

1 に答える 1

1

まず、jquery css 関数を使用して変換を設定しても、ブラウザー固有のスタイル (-webkit、-moz-、-o、-ms) が適用されるとは思いません。つまり、現在のほとんどのブラウザーではおそらく機能しないでしょう。 .

style次に、要素の属性を介して JS でスタイルを設定することは と呼ばれ、 inline stylecss クラス/セレクターをオーバーライドします。ここで問題が発生しているとは思いません。

必要なのは2クラスです。すでに .5 のスケールを持っているもので、ロード時に 2 番目のクラスを JS で適用します。もう 1 つの方法は、CSS キーフレームを使用することです。http://www.w3schools.com/cssref/css3_pr_keyframes.asp

于 2012-09-19T20:35:06.827 に答える