如何从不同的色谱柱尺寸转换？

Question

我想方法在布局上动态调整大小（在悬停不同部分时）创建过渡。

以下是我使用bootstrap的基本布局：

<div class="page-container container" id="content">
        <div class="row" id="title_row">
            <div id="panel0" class="col-xs-12">

            </div>
        </div>
        <div class="row">
            <div id="panel1" class="col-xs-6">

            </div>
            <div id="panel2" class="col-xs-6">

            </div>
        </div>
        <div class="row">
            <div id="panel3" class="col-xs-12">

            </div>
        </div>
    </div>

这里是线框：

我想在3种状态之间切换，如下图所示：

州1

州2

状态3

我尝试了几种方法来解决这个问题：

• 我保留了bootstrap布局系统，只使用javascript和spacebars helpers修改了列大小和顺序。 Here is a Meteorpad version of it with no css based on click rather than hover它有效但我不能通过这种方法进行任何转换。
• 我尝试使用仅限CSS3的方法，但似乎因为CSS转换需要绝对大小值而使其响应变得复杂。我不确定（＆gt; css非常弱），但我相应地说明this article：

  

“自动”高度当然是最好的选择，但由于我们无法为此设置动画，我们需要为过渡设置一些高度

此外，我无法弄清楚如何仅使用CSS响应性地获取4个布局，而不使用bootstrap布局系统。我不知道是否有可能。

• 最后，我看了Blaze _uihooks。基本原理是在每个面板模板的两个版本之间切换，并在过渡期间相应地扩展/缩小它们。事件处理类似于meteorPad示例。这是我迄今为止最好的领导，但我对从哪里开始无能为力。你认为这是一个好方法吗？

在您将问题标记为“过于宽泛”或向下投票之前，请考虑帮助我缩小范围：

• 只能用CSS完成，还是应该放弃这个选项？
• 是否可以使用Blaze _uihooks完成？如果是这样，我应该从哪里开始？我用谷歌搜索，但我找不到任何帮助的文档或资源。我发现packages但它们是面向集合的或专注于路线变化。
• 您是否有我应该探索的其他想法？