CSS内联块转换

Question

简要摘要

我有一个页面，用来列出一组div。它们扩展到页面的全宽，大小由百分比决定。

我在顶部添加了3个按钮，它们使用一点jQuery来控制这些div的布局。例如，如果状态一是活动的（默认），那么div的宽度为100%，最大高度为400px（宽度设置为100%）。当按下第二个按钮并激活状态2时，div采用50%的宽度，每行按2排序。当状态3通过第三个按钮被激活时，其divs宽度假定为33%，并且在每行中被排序为3。

我的方法是通过jQuery在div中添加一个CSS类来表示它当前所处的状态。每次调用一个新状态时，两个相反的状态都会通过jQuery删除，以覆盖所有的基，无论它当前处于什么状态。

所有这些都非常好。

问题

我想让各州之间的过渡尽可能顺利。尽管添加了轻松进出的过渡效果可以平滑地调整大小。div在新行上的实际移动是即时的。我更喜欢从下面的位置过渡到上面的一排，而不是立即跳跃。

要演示所需的转换，请检查此小提琴-http://jsfiddle.net/Mke7E/

虽然这是有效的，但它是基于媒体查询的，这显然不是我所使用的。除此之外，它使用固定的宽度/高度，经过一段时间的尝试，我无法复制功能并将其融入我自己的功能中。

我通过同事在工作中看到过多个网站使用它，不幸的是，我现在记不清了，否则我会检查他们的代码以更好地理解它。

演示我的问题

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

如果您注意到从状态1到状态2的区别是从第二个div跳到最上面一行，但在我描述的jsfiddle中，它几乎会从下面过渡到右上角。这就是我正在努力实现的目标。

我的代码

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/

这是我最后得到的最适用的答案。只要做一些调整，就可以重复我想要的功能。值得未来的观众观看。