だから、.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 のブーンドグルであり、無効にしたいだけです。助言がありますか?
ありがとう!
マイク