CSS3通常のフローポジションからアブソリュートへの移行

Question

私は過去に数回これをヒットしましたが、良い解決策をとらえたことはありませんでした。自然な文書フローに従って配置された複数のHTML要素がある場合例えば、divの単純なスタックだとします。 CSS3のトランジションを使用して、これらの要素の1つをスムーズにページの固定された場所（たとえば0,0）に移動してから元の位置に戻したいと思います。

positionスタイル属性をabsoluteまたはfixedに変更していない場合は、その位置がスナップして移行指示を無視するという問題があります。そのような移行は、要素が現在どこにあるのか、それが望ましい点からどのくらい離れているかを把握するためのJavaScriptコンポーネントの一部を含むと想像して、CSSスタイルを動的に構築します。

しかし、それは些細なことのように思えるもののために行くために非常に多くのように感じる。より良い方法がありますか？

Answer 1

はい、私たちは静的な位置から絶対的な位置へと移行することができますが、現実的にはすぐに来るとは思われません。私はちょうどheight: pxからheight: auto;に移行できることに満足しています。

私の推測では、ブラウザが2つの「互換性のない」値の間を補間するために計算を行わなければならないということです。したがって、height: 20pxを設定してからheight: autoに移行する場合は、ブラウザでと入力すると、の位置が自動で計算に集中する可能性があります。それはjQueryでも実装されていないので、いくつかのテストが壊れていると思うのですが、それは単純なハッキーです。

あなたは建築家あなたのCSSを使用すると、常にウィンドウを参照する位置絶対に必要になりますことを知って、そしてJavaScriptを大幅によりシンプルである場合：あなただけのオフセットと0の間でトグルする必要があり、0

$(".hover").on("mouseover", function(){ 
    $(this).css({ 
     top: $(this).offset().top * -1, 
     left: $(this).offset().left * -1 
    }) 
}); 

http://jsfiddle.net/crUFY/

domの要素をクローンして元の画像を隠してから、クローンをウィンドウの上部にアニメーション表示することが、より堅牢なソリューションになります。この方法で、親要素に相対的な位置を適用することができます。