14

要素のリストがあり、特定のアクションで、css-transform translate を適用してウィンドウの中央に移動したいと考えています。css-transform を使用して要素を相対的に移動することは知っていますが、ウィンドウの中央 (ライトボックス スタイル) など、絶対にどこかに固定できるかどうか疑問に思っていました。アルバム カバーが反転して中央に表示される、iPad Music アプリに似たアニメーションを見ています。

注: 周囲の要素のリフローを回避するため、css-transforms を使用したいと考えています。

ナム

編集:より良い説明のために JSfiddle を作成しました: http://jsfiddle.net/bdtZc/、関連する行:

.card:focus {
   -webkit-transform: rotateY(180deg);
}
4

4 に答える 4

18

2017年更新

この回答に対して別の賛成票を受け取ったばかりなので、もう一度考えてみようと思いました。

現在のブラウザでは、他の回答の transform(-50%, -50%) テクニックでうまくいくはずですが、コンテンツコンテナの設定方法によっては、ウィンドウの中央に表示されない場合があります。ウィンドウよりも小さいか大きいコンテナの中心である可能性があります。

最新のブラウザーはビューポート ユニット (vh、vw) をサポートしており、ビューポートのセンタリングに関する限り、探しているものを正確に提供します。現在の位置からビューポートの中心までのアニメーションは、スクロールが原因で別の問題になります。

http://caniuse.com/#feat=viewport-units https://developer.mozilla.org/en-US/docs/Web/CSS/length (vh、vw を参照)

CSS 変換なし

絶対配置を使用すると、css-transform を使用せずにこれを実現できます。

(完全なコードはこちら: http://jsfiddle.net/wkgWg/ )

.posDiv
{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    border:1px solid red;

    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}

.triggerElement:hover .posDiv
{
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;

    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transition:all 2s;
}

CSS トランスフォームあり

CSS-Transform を引き続き使用する場合は、JavaScript を使用して変換の「中心」または終了位置を計算し、実行時に変換ステートメントを生成して添付する必要があります。原点変換ベクトルは、「中心から画面へ」ベクトルから差し引く必要があります。

これは、Rico Sta による jQuery.transit プラグインを介して css-transform (サポートされている場合) を使用する JavaScript バージョンです。クルス。

(完全なフィドル: http://jsfiddle.net/ZqpGL/263/ )

$(function() {
    var $cards = $('.card');
    var cardInFocus = null;


    $cards.each(function(index, elem) {
        var $elem = $(elem);
        var pos = $elem.position();
        $(elem).data('orig-x', pos.left);
        $(elem).data('orig-y', pos.top);
    });

    var reset = function() {
        if (cardInFocus) {
            $(cardInFocus).transition({
                x: 0,
                y: 0
            });
        }
    };

    $cards.on('focus', function(e) {
        reset();
        cardInFocus = this;
        var $doc = $(document);
        var centerX = $doc.width() / 2;
        var centerY = $doc.height() / 2;
        var $card = $(this);
        var origX = $card.data('orig-x');
        var origY = $card.data('orig-y');
        $(this).transition({
            x: centerX - origX,
            y: centerY - origY
        });
    });

    $cards.on('blur', function(e) {
        reset();
    });

});
于 2013-05-23T21:56:55.260 に答える
11

CSS-Tricks ( http://css-tricks.com/centering-percentage-widthheight-elements/ )の記事では、JS を使用せずに、絶対配置と変換を組み合わせて使用​​できることが指摘されています。

これは、リフローを制限するのに役立ち、要素または画面のサイズが変更されても、要素を中央に維持します。

.center {
    position: absolute;
    left: 50%;
    top: 50%;

    /*
    Nope =(
    margin-left: -25%;
    margin-top: -25%;
    */

    /* 
    Yep!
    */
    transform: translate(-50%, -50%);

    /*
    Not even necessary really. 
    e.g. Height could be left out!
    */
    width: 40%;
    height: 50%;
}
于 2014-03-06T19:28:18.860 に答える
9

vh（ビューの高さ）単位を使用して、純粋な CSS で実行できるようになりました。要素自体ではなく、常に画面サイズに相対的です。

/* position element in middle of screen */
translateY(calc(50vh))

したがって、要素の高さ (たとえばheight:320px) がわかっている場合は、正確に画面の中央に移動できます。

/* moves the element down exactly off the bottom of the screen */
translateY(calc(50vh - 160px))
于 2015-10-28T04:52:59.300 に答える
0

これはさまざまなサイズの画像で問題になるため、これについてはJSソリューションを検討することをお勧めしますが、CSSソリューションを求めたので...

次のように、この効果にキーフレーム アニメーションを使用できます。

.card:focus {
    transition:all 2s;
    position: absolute;
    animation: center 3s forwards;
}

@keyframes center {
    0% {
        top:0%;
        left:0%;
    }
    100% {
        top:45%;
        left:45%;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
}

編集： これは、以下を使用した大まかなより良いjQueryバージョンです

position:relative;

jsFiddle 

$('.card').focusin(function () {
    var tc = $(window).height() / 2 - $('.card').height() / 2;
    var lc = $(window).width() / 2 - $('.card').width() / 2 - $(this).offset().left;

    $(this).animate({
        left: lc,
        top: tc
    });
});

$('.card').focusout(function () {
    $(this).animate({
        top: 0,
        left: 0
    });
});
于 2013-05-23T23:02:31.277 に答える