CSS 内联块转换

Question

简要总结

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

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

我如何设置它是通过 jQuery 添加一个 CSS class 到 div 来表达它当前所处的状态。每次新状态被称为两个对立状态都通过 jQuery 删除，只是为了覆盖所有基地，无论它当前处于什么状态。

所有这些都工作得很好。

问题

我想让状态之间的转换尽可能顺畅。虽然添加缓入缓出的过渡效果可以平滑调整大小。 div 到新行的实际移动是瞬时的。我更喜欢从下方位置到上方一排的过渡运动，而不是立即跳跃。

为了演示所需的转换，请选中此 fiddle - http://jsfiddle.net/Mke7E/

虽然这有效，但它是基于媒体查询的，这显然不是我正在使用的。除此之外，它使用固定的 widths/heights，经过一些尝试后，我无法复制该功能并将其合并到我自己的功能中。

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

演示我的问题

代码笔：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/

这是我最终得出的最适用的答案。通过一些调整，这可以适应重复我想要的确切功能。值得一看未来的观众。

CSS 内联块转换

CSS inline-block transitions

jquery

html

css

css-transitions