web-dev-qa-db-ja.com

CSS3-JavaScriptによるmargin-leftプロパティのアニメーション

この 概念実証 を考慮して、JavaScriptを介してマージン左（負の値と正の値の両方）をアニメーション化することは可能ですか？

注：これはWebKit専用であることを知っています。そして私はそれで大丈夫です、私がiOS Safariのために開発しているのを見てください。


更新

回答ありがとうございます。jQueryのアニメーション関数は、純粋なCSSアニメーションをサポートしていません。

ioscsswebkitmobile-safari
11
cllpse

「JavaScriptでこれを実行できますか」と具体的に言っていますが、JavaScriptを使用する必要はありません。すべてのブラウザーがアニメーションでニースを再生できるようにアニメーションをJavaScriptにフォールバックさせる方法として、リンク先の概念実証でjQueryのみを使用していることはかなり確実です。特にモバイルSafari用に開発しているので、履歴プラグインを使用して状態をプッシュおよびポップしてブラウザーの戻るボタンを機能させる場合を除いて、jQueryを使用する必要はありません。これは、CSS遷移プロパティと:target疑似セレクターを介して完全に実行できます。

したがって、別の方法として、次のようなことができるはずです。

HTML：

<div id="thing-that-will-transition">
    <a href="#thing-that-will-transition>click this to transition the div</a>
</div>

CSS：

#thing-that-will-transition
{
    (bunch of properties)
    -webkit-transition: margin-left [the rest of your transition values]
}

#thing-that-will-transition:target
{
    margin-left: [your properties]
}

フラグメントURLが遷移する要素の名前と一致する限り、アンカーを使用する代わりにJavaScriptを使用してフラグメントをURLにプッシュできますshouldまだ移行が行われている間、フラグメントhrefを使用します。また、jQuery履歴プラグインを使用したり、履歴スタックを独自にプッシュおよびポップしたりした場合でも、アプリの戻るボタンの動作が得られます。

CSSアニメーションをトリガーするJavaScriptソリューションを具体的に求めていることは承知していますが、なぜこれが必要なのかわかりません。これがまったく役に立たない場合は申し訳ありません。


[〜＃〜] update [〜＃〜]： これは、上記を示すjsFiddleです 。 this jQuery履歴プラグインを使用して履歴スタックを管理するため、フラグメントURLから許容できる戻る/進むボタンの動作を取得できます。アンカータグは、JavaScriptが有効になっていないブラウザーのフォールバックとして、href属性に標準フラグメントを含むonClickでプラグインの「プッシュ」または「ロード」メソッドを使用します。


UPDATE 2：これは別のjsFiddleです 遷移の代わりに変換/変換を使用します。


UPDATE 3（roosteronacidによる）：

そしてアニメーションをJavaScriptに通すことに関しては、次のことができます：

var element = document.getElementById("...");

setTimeout(function ()
{
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
25
Doug Stephen

Css3で遷移を設定すると、その後の要素への変更がアニメーション化されます。

.MY_CLASS {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.3s ease-out;  /* IE10 */
    transition: all 0.3s ease-out;  
}

これは、すべてのcssの変更に適用されるほぼクロスブラウザー（くそーIE）遷移を指定し、0.3秒続き、緩和されるため、最後に向かって遅くなります移行の。したがって、左/右にアニメーション化するには、CSSを変更するだけです。

$(".MY_CLASS").css("margin-left", "-300px");

現在の位置を基準とした相対的な位置にアニメーション化する場合は、300pxの固定位置にアニメーション化することに注意してください。

var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");

ここで実行例を参照（jsFiddle）

9
Jordan Wallwork

ブラウザーにほぼ対応している（IEを除く）トランジションを使用し、JSを介してキーフレームを設定します。

5
Lea Verou

これは、CSS、HTML、およびWebKitのみを使用して機能します。

#wrapper {
     width: 700px;
     text-align: left;
     border-radius:10px;
     -moz-border-radius:10px;
     border-style:solid;
     border-width:1px;
     border-color:#ccc;
     padding:30px 30px;
     -moz-box-shadow: 0px 0px 5px #BBB;
     -webkit-box-shadow: 0px 0px 5px #BBB;
     box-shadow: 0px 0px 5px #BBB;

     -webkit-transition-property: -webkit-transform, margin-left;
     -webkit-transition-duration: 3s;
     -webkit-transition-timing-function: ease-in;
     -webkit-transform: translate(100px);
}

<div id="wrapper">Placeholder text</div> HTMLファイルでテストしてください。 Googleで私のために働いたChrome 12.0.742.112およびSafari 5.0.5（6533.21.1）。すぐにアニメーションが表示されない場合は、ブラウザが翻訳を処理していることが原因である可能性があります速すぎます（またはキャッシュでしょうか？）なんらかの遅延を追加することを検討するかもしれません。更新ボタンを数回押しただけで本当に速いです。

編集：girliemac's テストページの背後にあるソースを確認してください。そこにはいくつかの洞察に満ちたものがあります。こちらもご覧ください SO post 。

1
Jacob Barnard

jqueriesを使用できます.animate()- http://api.jquery.com/animate/

私の例を確認してください- http://jsfiddle.net/ajthomascouk/jS83H/ -+と-を押します

0
Alex

JQueryを使用したCSSマージンのアニメーションは次のように機能します。

$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});
0
Jose Faeti

Webkitのcssアニメーションを使用するには、transformプロパティを持つクラスを作成します。その後、jQueryを使用して、必要に応じて上記のクラスを追加/削除できます。

0
DA.