0

トランジションだけを使用してDOM要素をアニメーション化しようとしています。これは、多くの形式でDOM要素の方が優れていることを読んだからです。しかし、私の質問は単純です。トランジションを使用してアニメーションの動的な値を渡す方法はありますか？私は基本的にこれを行う方法を知りません、すなわち。この例に示すように、固定値のクラスを追加することによってのみDOM要素をアニメーション化できます（Webkitブラウザーでうまく機能します）

CSSクラスでわかるように、次のようになります。

.motion {
  left: 300px;
  top: 200px;
  position: absolute;
}

...アニメーションの値は静的ですが、実行時にパラメータをトランジションに渡すにはどうすればよいですか？、（つまり、左の値が異なる。たとえば）

私は次のように.css（）メソッドを介してjQueryでそれを実行しようとしました：

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '30', 'top': '100' });          
  });
}​

しかし、何らかの理由で遷移がトリガーされません。なんで？

すべての助けは非常にありがたいです！

4

5 に答える 5

1

jQueryAnimate。 http://api.jquery.com/animate/

$("#square").animate({'left':'30px','top':'100px' }, "slow");
于 2012-04-24T17:40:10.253 に答える
1

jQuery 1.6以降を使用している場合は、これを試して、.css()メソッドを使用してアニメーション動作を取得できます。

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '+=30', 'top': '+=100' });          
  });
}​

jQueryドキュメントから

jQuery 1.6以降、.css（）は.animate（）と同様の相対値を受け入れます。相対値は、現在の値をインクリメントまたはデクリメントするための+=または-=で始まる文字列です。

于 2012-04-24T17:43:23.397 に答える
1

私があなたの主張を正しく理解しているなら、あなたはそれを現在の値/値のペアに追加する方法で値/値を使用するようにトランジションが欲しいです：もしそうなら、あなたは以下の方法を試してみるべきです;

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '+=' + 30, 'top': '+=' + 100 });
  });
}​
于 2012-04-24T17:45:43.150 に答える
1

さて、あなたのコメントはあなたがそれを好きであることを示しているので、ここにあなたの答えがあります：

jQueryTransitを使用します。

必要に応じてイージング機能をサポートします。

のanimateようなAPIがあり、animateCSS3トランジションがサポートされていない場合にフォールバックできます。

于 2012-04-24T17:57:54.597 に答える
0

おそらく私は注意を払っていませんが、期間、イージングなどの遷移プロパティの定義はどこにも見当たりません...これらはCSSのどこかにあると思いますか？そうでなければ、物事は機能しません。

2つの定義を設定する必要があります。1つはトランジション自体用で、もう1つは変換する属性用です。CSS3の仕様については、この複雑な変換方法と移行方法を使用しているのが私の気の毒です。それは本当に悪い考えです。

于 2012-04-24T18:24:18.667 に答える