单击时为 css、位置、宽度和高度设置动画答案

【问题标题】：Animate css, position, width & height on click单击时为 css、位置、宽度和高度设置动画
【发布时间】：2015-01-24 03:28:05
【问题描述】：

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

<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...
}

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

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

任何有关如何实现此目的的想法都会有所帮助。

【问题讨论】：

标签： jquery css animation

【解决方案1】：

首先，正如in this question 已经回答的那样，您不能在relative 和absolute 定位之间设置动画。

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

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

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

【讨论】：

这里的想法似乎很有希望，但是我没有看到任何指向您的示例的链接。

【解决方案2】：

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

【讨论】：

【解决方案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

【讨论】：