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/

这是我最后得出的最适用的答案。 进行一些调整，即可使其重复我想要的确切功能。 值得一看的未来观众。