web-dev-qa-db-ja.com

絶対配置と相対配置が混在するCSS遷移

短くて甘いバージョン：

position: relativeとposition: absoluteをスムーズなCSS遷移と組み合わせることは可能ですか？

詳細バージョン：

私は小さなウィジェット（デッキと呼びます）を作成していますが、これを折りたたんだり展開した状態にすることはできません。これまでのところ、これはうまく機能しています。

2つの状態を切り替えると、当然、遷移アニメーションが保証されます。これも機能していますが、実現したい方法ではありません。私がやりたいのは、今のようにJavaScriptを使用した絶対配置を使用する代わりに、CSS遷移を使用することです。

残念ながら、現在のシナリオでは、展開状態では、デッキ内のカードは常に絶対に配置され、それらの位置はデッキに追加されるときにオンザフライで計算されます。折りたたむと、最初の4つがカスケード式に積み上げられ、残りが4番目のカードの上に積み上げられます。スタックを視覚的に模倣します。

このアプローチの問題は、通常のレイアウトフローに頼ってカードを配置することができないことです。これは多くの理由で面倒です。拡張状態のカードにposition: relativeを使用すると、次々にうまく流れます。しかし、折りたたまれた状態への移行はアニメートされていません。ある位置から別の位置へ瞬時にスナップするだけです。そもそも絶対的なポジショニングがなければ、ブラウザはどこから移行するかを明確に知らないため、これは当然のことです。

私がこれまでに持っているのはこれです（ Fiddle ）：

CSS（関連ルールのみ）：

div.deck-container {
    position: relative;
}
div.deck-container li {
    display: inline-block;
    position: relative;

    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
div.deck-container.collapsed li {
    position: absolute;
    left: 9px;
    top: 6px;
}
div.deck-container.collapsed li:first-child {
    left: 0;
    top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
    left: 3px;
    top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
    left: 6px;
    top: 4px;
}

HTML（関連マークアップのみ）：

<div class="deck-container">
    <ul>
        <li>Card 1</li>
        <li>Card 2</li>
        <li>Card 3</li>
        <li>Card 4</li>
        <li>Card 5</li>
    </ul>
</div>

私の完璧な世界では、クラスcollapsedをdiv.deck-containerに追加すると、カードが折りたたまれた位置にアニメーション化され、逆も同様です。しかし、これは不可能なようです。誰かが私に間違っていると言ってください。

css-transitionscss
27
nikc.org

いいえ、positionプロパティをアニメーション化することはできません。アニメーション化できるcssプロパティはいくつかあり、それらのほとんどには値として数値または色があります（いくつかの例外はあります）。このリストは w3c css transitions especification で確認できます。

とにかく、topおよびleftプロパティをアニメーション化できるため、 this fiddle のように、マークアップを少し変更して効果を得ることができます。

div.deck-container {
    position: relative;
}
div.deck-container li {
    background-color: #fff;
    position: absolute;
    border: 1px solid black;
    padding: 3px;
    display: inline-block;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
div.deck-container li {
    left: 160px;
    top: 0px;
}
div.deck-container li:first-child {
    left: 0px;
    top: 0px;
}
div.deck-container li:nth-child(2) {
    left: 40px;
    top: 0px;
}
div.deck-container li:nth-child(3) {
    left: 80px;
    top: 0px;
}
div.deck-container li:nth-child(4) {
    left: 120px;
    top: 0px;
}
div.deck-container.collapsed li {
    left: 12px;
    top: 8px;
}
div.deck-container.collapsed li:first-child {
    left: 0;
    top: 0px;
}
div.deck-container.collapsed li:nth-child(2) {
    left: 3px;
    top: 2px;
}
div.deck-container.collapsed li:nth-child(3) {
    left: 6px;
    top: 4px;
}
div.deck-container.collapsed li:nth-child(4) {
    left: 9px;
    top: 6px;
}

元の位置を絶対位置に設定し、それらの要素を配置しました。次に、クラスを切り替えると、topand left属性のみが変更されるため、移行が機能します。

40
scumah

@ nikc.org代わりにtranslateを使用できます。

    div.deck-container {
        position: relative;
    }
    div.deck-container li {
        background-color: #fff;
        position: relative;
        border: 1px solid black;
        padding: 3px;
        display: inline-block;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    div.deck-container.collapsed li:first-child {
      -webkit-transform: translate(0, 0);
         -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
           -o-transform: translate(0, 0);
              transform: translate(0, 0);
    }
    div.deck-container.collapsed li:nth-child(2) {
        -webkit-transform: translate(-100%, 2px);
         -moz-transform: translate(-100%, 2px);
          -ms-transform: translate(-100%, 2px);
           -o-transform: translate(-100%, 2px);
              transform: translate(-100%, 2px);
    }
    div.deck-container.collapsed li:nth-child(3) {
        -webkit-transform: translate(-200%, 4px);
         -moz-transform: translate(-200%, 4px);
          -ms-transform: translate(-200%, 4px);
           -o-transform: translate(-200%, 4px);
              transform: translate(-200%, 4px);
    }

実施例

15
nd_macias