Question

摘要

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

我在顶部添加了3个按钮，它们使用一些jQuery来控制这些div的布局。例如，如果状态1处于活动状态（默认值），则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/

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

CSS内联块转换

1 个答案: