2

だから、.image-wrapper に img タグがあり、ホバー時にパンしたい。CSS3トランジションのかなり基本的な使用 - ここに基づいています: http://designshack.net/articles/css/joshuajohnson-2/

これが私のスタイラスコードです：

// Portfolio

.portfolio-wide
  .image-wrapper
    height 300px
    overflow hidden

.portfolio-wide
  .image-wrapper img
    width 100%
    margin-top 0px
    transition all 10s ease


.portfolio-wide
  .image-wrapper:hover img
    margin-top -100%

Stylus と Nib はこれを CSS に変換し、すべてのブラウザー固有のものを使用します。

私の問題は、IE < 10 がひどいことです。下にパンする代わりに、すぐ下にジャンプします。これは壊れているように見えます。この機能はそれほど重要ではないので、IE<10 では無効にしたいだけです。

スタイラスでそれを行うにはどうすればよいですか? かなり一般的なことのようですが、例やドキュメントが見つかりませんでした。

提案？ページの読み込み時にスタイルを追加/削除するために jQuery CoffeeScript を試しましたが、うまくいきませんでした。

$(document).ready ->

  # Like I don't have better things to do IE...
  # determine if the browser supports transition
  thisStyle = document.body.style
  supportsTransition = true
  (thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.OTransition !== undefined || thisStyle.transition !== undefined)

  alert supportsTransition

  # assign jQuery transition if the browser doesn't support
  $if ( supportsTransition )
    alert "here"
    $(".portfolio-wide .image-wrapper:hover img").css('margin-top', '-100%')

アラートは適切なタイミングで発生していましたが、コードに適切な効果が見られませんでした。上記のコードでは、margin-top スタイルが追加されていないため、遷移は発生しませんでした。!supportsTranstion で .css('margin-top', '0px') を削除しようとしましたが、うまくいきませんでした。

とにかく、これは IE のブーンドグルであり、無効にしたいだけです。助言がありますか？

ありがとう！

マイク

4

1 に答える 1

2

この質問は少し古いですが、ここに 2 つの解決策があります。

• 簡単でクリーンなソリューション : Modernizr ( http://modernizr.com/ ) を使用します。ブラウザでサポートされている各プロパティの html タグにクラスを追加します (例: csstransitions)。次に、Stylus (またはその他のスタイルシート ドキュメント) を使用すると、次の方法で任意の要素を簡単にターゲットにすることができます。

html.csstransitions
    .portfolio-wide
        .image-wrapper img
            transition all 10s ease

• 重いソリューション: jQuery トランジット ( http://ricostacruz.com/jquery.transit/ ) を使用します。animate() と同じように動作しますが、css3 トランジションを使用します。利点として、遷移がサポートされていない場合はいつでも animate() にフォールバックできます。

if (!$.support.transition) {
    $.fn.transition = $.fn.animate;
}
于 2013-12-19T15:57:27.323 に答える