web-dev-qa-db-ja.com

CSSトランジションを使用して、画面外から絶対レイアウトにdivをスライドさせる方法は？

私は絶対に配置されたdivのグリッドを持っています（グリッドは、大きな長方形を作るために一緒にフィットするさまざまな形の長方形で構成されています）。

個々の長方形のすべてをオフスクリーンからグリッドに「飛ばす」ことで、このグリッドの表示をアニメーション化しようとしています。したがって、左側の長方形は左から飛び込み、右側の長方形は右から飛び込みます。

私はCSS3トランジションを使用しており、上または左から飛んでくると完全に機能します。負のマージンを使用して画面の外に配置し、これをアニメーション化してmargin-left（またはmargin-top）= 0に変更します（例：元の/正しい位置）。

これは変換を使用するよりも理にかなっているようですが、何らかの理由で変換がより適切に機能/実行される理由があると思われる場合は、私を訂正してください。

しかし、これは明らかにmargin-right/margin-topでは機能しないので、これを達成するための最良の方法が右と下から何であるかを誰かが提案できるかどうかを確認したいと思いました。親をオーバーフローさせることができます：同じ効果を持つ左/上の位置を非表示にしてアニメーション化しますが、オフとオンの画面ごとに別々のルール/位置が必要にならないように、負のマージンと同等の一般的な解決策があるかどうかを確認したいと思いましたバージョン？たとえば、負のマージンを使用する場合、要素固有のマークアップなしで同じ側から飛ぶすべてのボックスに同じ負のマージンを適用できます（ただし、上/左をアニメーション化する場合、各要素には独自の「オフスクリーン」位置が必要になります最終位置に移動するので、適切な場所から飛んでいきます）。

あるいは、一般的にもっと良い方法がある場合（CSS3で問題ありません！）、それを聞いてみたいです！

htmlcsscss3css-transitionsmargin
7
deshg

マージンでアニメートしないでください。常にトランスフォームでアニメートします。これが意図された用途です。これはポールアイリッシュからのそれに関する素晴らしい記事です

Translate（）で要素を移動する方が良い理由 http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

右から入ってくるdivを非表示にするには、overflow-x：hiddenを使用します。これは、ピクセル値を指定せずに変換を使用してアニメーション化する方法を示すために作成したフィドルです。

http://jsfiddle.net/P9GNS/3/

HTML

<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

CSS

body {
    overflow-x: hidden;
}


.box-wrapper {
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}


.box-wrapper.loading:nth-child(odd) { transform: translate(100%) }
.box-wrapper.loading:nth-child(even) { transform: translate(-100%) }


.box-wrapper:nth-child(odd)  .box { background: orange }
.box-wrapper:nth-child(even) .box { background: red }


.box {
    margin: auto;
    width: 100px;
    height: 100px;
}

JAVASCRIPT

$('.box-wrapper').each(function(index, element) {

    setTimeout(function(){
        element.classList.remove('loading');
    }, index * 600);

});
23
Michael

通常、transform: translate...は、GPUを使用してアニメーションをレンダリングしようとするため、ほとんどのブラウザーでパフォーマンスが向上します。

これらの結果は jsperf から確認できます。

とにかく別の良い解決策（javascriptなし）は、@keyframesおよびanimation:プロパティを使用してアニメーションを完全にCSSに添付することです。

この問題の詳細については、 この記事 を参照してください。

あなたが読むことができるガイドラインから

可能であれば、CSSキーフレームアニメーションまたはCSSトランジションを使用します。ブラウザは、ここでペイントと合成を最適化できます。

2
drinchev