CSS內聯塊轉換

Question

簡要總結

我有一個頁面用於列出一組div。 它們擴展到頁面的整個寬度，大小由百分比確定。

我在頂部添加了3個按鈕，這些按鈕使用了一些jQuery來控制這些div的布局。 例如，如果狀態一為活動狀態（默認狀態），則div的寬度為100％，最大高度為400px（寬度設置為100％）。 當按下第二個按鈕並激活狀態2時，div假定寬度為50％，並在每行中排序2。 通過第三個按鈕激活狀態3時，其div寬度假定為33％，並在每行中排序為3。

我如何設置它是通過jQuery將一個CSS類添加到div中以表示它當前所處的狀態。每次調用一個新狀態時，都會通過jQuery刪除兩個相反的狀態，以覆蓋所有基礎，無論如何說明它當前在。

所有這些工作都很好。

問題

我想使狀態之間的過渡盡可能平滑。 盡管增加了緩入過渡效果，但可以平滑調整大小。 div到新行的實際移動是瞬時的。 我更希望從其下方的位置過渡到上方的一行，而不是立即跳躍。

為了演示所需的過渡，請檢查此小提琴-http: //jsfiddle.net/Mke7E/

盡管此方法有效，但它是基於媒體查詢的，顯然不是我所使用的。 除此之外，它使用固定的寬度/高度，並且經過一番嘗試之后，我無法復制該功能並將其合並到我自己的功能中。

我已經看到多個站點通過工作中的同事使用了此站點，但是不幸的是，我現在不記得任何站點，否則我將檢查他們的代碼以更好地自己理解。

展示我的問題

CodePen： http ：//codepen.io/anon/pen/MYLByw

如果您注意到從狀態1到狀態2的區別是從第二個div跳到第一行，但是在我的描述中，它幾乎會從下面過渡到右上角。 這就是我試圖實現的目標。

我的密碼

jQuery的

$( "a.full" ).on("click", function(e) {
    $( "div.box" ).removeClass( "half third" ).addClass("full");
    e.preventDefault();
});
$( "a.half" ).on("click", function(e) {
    $( "div.box" ).removeClass( "full third" ).addClass("half");
    e.preventDefault();
});
$( "a.third" ).on("click", function(e) {
    $( "div.box" ).removeClass( "half full" ).addClass("third");
    e.preventDefault();
});

的HTML

<a href="#" class="full">STATE 1</a>
<a href="#" class="half">STATE 2</a>
<a href="#" class="third">STATE 3</a>

<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>
<div class="box">SOME CONTENT</div>

CSS：

div.box {
    width: 100%;
    left: auto;
    background-size: 100%;
    background-position: center center;
    height: 100%; 
    background-repeat: no-repeat;
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    background:red;
    text-align: center;
    transition: all 400ms ease-in-out;
    transform-origin: 50% 50%;
    white-space:nowrap; 
}
div.box.half {
    display: inline-block;
    width: 49%;
    white-space:nowrap;    
}

div.box.third {
    display: inline-block;
    width: 33%;
    white-space:nowrap;
}

a {
    width:100%;
    display:block;
}

Answer 1

http://vestride.github.io/Shuffle/

這是我最后得出的最適用的答案。 進行一些調整，即可使其重復我想要的確切功能。 值得一看的未來觀眾。