CSS 内联块过渡答案

【问题标题】：CSS inline-block transitionsCSS 内联块过渡
【发布时间】：2015-05-29 09:58:49
【问题描述】：

简要总结

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

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

我的设置是通过 jQuery 向 div 添加一个 CSS 类以表达它当前所处的状态。每次调用新状态时，都会通过 jQuery 删除两个相反的状态，只是为了覆盖所有基础不管它目前处于什么状态。

所有这些工作都很好。

问题

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

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

虽然这可行，但它是基于媒体查询的，这显然不是我正在使用的。除此之外，它使用固定的宽度/高度，经过一番玩弄后，我无法复制该功能并将其合并到我自己的中。

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

证明我的问题

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

【问题讨论】：

在你的小提琴中它可以工作，因为你实际上是在转换元素的margin，而那个边距是元素“位置”的结果。但是，在您的 codepen 中，您依赖于正常的布局流程，即元素的自动确定位置——并且您无法转换。如果你想实现这一点，你需要一个脚本来计算位置，然后显式地将元素定位在那里。
@CBroe 是的，确实，我了解第一个 jsfiddle 是如何工作的，鉴于我在 codepen 中显示的方式，我很好奇如何实现这一点。不过谢谢你，看来你已经证实了我的担忧，即我必须对 jQuery 有更多的了解才能正确解决这个问题。
无论如何乔，虽然我们（网络开发人员）可能会经常调整浏览器的大小以测试我们的响应式“正在进行”设计，但您网络的实际未来用户（嗯，大市长）永远不会这样做它。他们只会看到一种布局或另一种布局，具体取决于他们使用的平台。我不会浪费太多时间尝试以平滑的方式重新创建布局更改（而且我永远不会使用该解决方案更改边距。很多东西都可能出错）。只是我的拙见
@AlvaroMenéndez - 绝对而且通常我只会告诉项目经理它没有发生/由于时间限制，这不是一个值得打扰的功能。然而，这已作为一个内部项目传递给我，重点是让一切尽可能顺利。如果有人好奇，这已经解决了我的问题 - vestride.github.io/Shuffle

标签： jquery html css css-transitions

【解决方案1】：

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

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

【讨论】：