Question

我的应用程序具有基本的右侧边栏/主要内容布局，如下所示：

<body>
<div class="sidebar">Sub nav</div>
<div class="main-content">Some content</div>
</body>

通常，主要内容块将浮动在侧边栏的左侧......非常典型的布局。但是，我希望允许用户点击页面上的某些btn，这将最大化主要内容区域以填充整个主体。基本上隐藏了它背后的一切。

我可以通过jquery应用一个类来为main-content提供一些额外的类：

.main-content.maximize {
position: absolute;
left: 0;
right: 0;
bottom: 0;
etc...
}

但我想动画显示最大化的显示。

请注意，我希望将主要内容从相对位置动画到绝对位置。还需要回到原始状态的动画。

任何关于如何实现这一点的想法都会有所帮助。

Answer 1

首先，已经回答in this question，您无法在relative和absolute定位之间制作动画。

但是，您可以做的是通过使用.position()返回的偏移量，使元素在动画之前完全定位并将其保持在屏幕上的相同位置。当你想要将它恢复到正常位置时，在动画之后，反过来并返回到初始位置并移除偏移。

如果元素是 in-flow ，您还需要提供相同尺寸的占位符以保持其占用的空间，以便没有其他任何东西流入该空间。

我试着在这里大致了解可以做些什么，但这应该根据你的特殊情况进行调整，因为它不会开箱即用。折叠边距，浮动，相对位置的位移可以改变解决方案的特定部分。

Answer 2

$('div').click(function () {
    $(this).css({
        'width' : $(this).width()  * 1.1,     
        'height': $(this).height() * 1.1
    });
});

Answer 3

所以我不得不在这个问题上稍微考虑一下，但想出了最终解决方案。

我没有使用JS动画主容器，而是在点击触发器时使用JS在侧边栏和主要内容区域的容器上切换类，如下所示：

$(document).on('click', '.toggle-view', function() {
    $(".content .wrapper").toggleClass("full-width");
    $(this).toggleClass('full-view, standard-view');
});

当.wrapper获得.full-width时，它会激活css中的过渡效果：

最小化侧边栏的宽度，
最大化主容器的宽度。

查看working sample here

动画css，位置，宽度＆amp;点击高度

3 个答案: