CSS3トランジションのJQueryフォールバック

単純なCSS3トランジションコードのJQuery/JSフォールバックを探しています。私のjavascriptは本当に基本的なものなので、置き換えコードを見つけて書くのは簡単ではありません。私はすでにmodernizrをチェックアウトしましたが、私は実際に多くのドキュメントを理解していませんでした。CSS3トランジションのJQueryフォールバック

ホバーオーバー時にtransform: rotate(20deg)を使用するアイコンです（これはIEでサポートされているため問題ありません）。問題が移行されしかし、私は

.icon{ 
....other css code 
-webkit-transition: all 300ms linear; 
-moz-transition: all 300ms linear; 
-o-transition: all 300ms linear; 
-ms-transition: all 300ms linear; 
transition: all 300ms linear; 
}

を使用しています。このためのjQueryのフォールバックはありますか？私はfadeIn();について考えていたが、これをどのようにコード化するのか分かりません。このような何かが

<script>$(icon).hover(function(){$(icon).fadeIn("slow");}); </script>

を?:とどのように私はそれがIEだ場合、彼らは唯一のjQueryを選ぶようにブラウザがフォールバックだ知っているのですか？

出典

2013-03-28 fumpr

jquery animateを使用 –

CSSトランジションを使用することの美しさは、サポートされていない場合でも、アニメーション化されていないだけです。私はそれに固執するでしょう。 – Bill

@BillyMathewsはい、確かに、それは悪くはないIEで点滅しますが、35％の人々（私はベルギー出身です）がまだ使用しているので、全員に同じ経験を与えたいIE。 – fumpr

Transit jQueryアニメーションコールをCSS3アニメーションに変換し、サポートされていないブラウザでは通常のjに戻します。

また、$ .supportを拡張してトランジションlike thisを確認し、テストが失敗したときにjQuery animateを使用することができます。

出典

2013-03-28 13:33:49

私はあなたが間違っていると思います。「Transitは、アニメーションなしで標準的なCSS（不透明度、余白など）を実行しながら、変換（回転、拡大縮小など）を行わずに古いブラウザを劣化させます。すべてのフォールバックは、自分でプログラムする必要があります。 –

@René "フレームベースのアニメーションへのフォールバックトランジションがサポートされていないときにクラシックアニメーションにフォールバックしたい場合は、手動で.transititionを.animateに再定義してください。" –

あなたはすでに答えを持っていると思いますが、それはあなたが考えるように複雑ではありません、現代的なものが利用可能であるかどうかを指定する2つの方法があります。最初のものは、 HTML要素でCSSクラス：それが利用可能な場合

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

それは第二、それが利用できない場合、それは「無フレキシボックス」のような「無」preffixと名前を表示され、名前が表示されます。 1つはjavascript経由です：

if(!Modernizr.csstransitions)

Modernizrにはboolアニメーションのフォールバックを設定する場合は、Modernizrクラスを使用して、この機能を持つブラウザのアニメーションのみを指定することをお勧めします。

.csstransitions #element{ 
-webkit-transition: ... ; 
-moz-transition: ... ; 
-o-transition: ... ; 
-ms-transition: ... ; 
transition: ... ; 
}

、それはその後、アニメーション指定されていない場合は、その後、機能が利用可能な場合modernizrチェックしている変数をJavaScriptのファイルを作成します。

if(!Modernizr.csstransitions) 
    $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

はこれがあなたにmodernizrがどのように動作するかのアイデアを与えるかもしれないが（私は願っています）、とにかく問題がある場合はこれをチェックしてもよいでしょうblog post私はずっと前に作った、 CSS3PIEのような他のもの（これはスパムではありません、私はただ助けようとしています）。

出典

2013-03-28 13:46:57 mechdeveloper

ありがとう！今すぐ試してみてください – fumpr

あなたはトランジションを検出する必要があるだけであれば$ .supportを拡張することができます。また、すでに表示されている要素に対してfadeInがどのような効果を与えるべきかによって、 –

さて、私はModernizrがどのように動作しているかを示したかっただけで、アニメーションの内容が分からないため、すでに表示されている要素にfadeinがどのような影響を及ぼすべきか分かりません。 – mechdeveloper

CSS3トランジションのJQueryフォールバック

答えて

関連する問題