使元素适合它的整个父级答案

【问题标题】：Make element fit it's entire parent使元素适合它的整个父级
【发布时间】：2015-05-21 12:25:53
【问题描述】：

我正在创建一个高级管理面板，我正在扮演编辑项目的角色，我喜欢当我点击编辑一个项目时，他会填满其父项的整个空间，但是我不知道如何制作元素通过动画回到原来的位置，知道怎么做吗？到目前为止我尝试过这个：

HTML

<div id="container">
    <div class="single-item">
        <div class="title">home</div>
        <a class="edit" href="#"></a>
    </div>
    <div class="single-item">
        <div class="title">Gallery</div>
        <a class="edit" href="#"></a>
    </div>
    <div class="single-item">
        <div class="title">Contact</div>
        <a class="edit" href="#"></a>
    </div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html, body, #container {
  height: 100%;
  min-height: 100%;
}

#container{
    & > .single-item{
        position: relative;
        background-color: #d9d9d9;
        border-radius: 2px;
        margin-bottom: 15px;
        padding: 15px;
        z-index: 1;

        & > .edit{
            display: block;
            position: absolute;
            background-color: #000;
            top: 15px;
            right: 15px;
            width: 20px;
            height: 20px;
        }

        &.active{
            z-index: 2;
        }
    }
}

Javascript

$("#container").on("click", ".edit", function(e){
    e.preventDefault();

    var el = $(this);
    var elParent = el.closest(".single-item");

    var curElTop = elParent.position().top;
    var curElLeft = elParent.position().left;

    elParent.toggleClass("active", function(){
        elParent.css({
            position: "absolute",
            top: curElTop,
            left: curElLeft
        }).animate({
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        });
    });

});

【问题讨论】：

使用 CSS3 制作动画，而不是 javascript this 将帮助您开始

标签： javascript jquery html css

【解决方案1】：

CSS3 过渡将帮助您为全屏宽度和高度创建流畅的动画。

但如果仍然出于某种原因，你想在 jQuery 中做，这里是解决方案：

第二次点击“编辑”按钮时，您只需说：

$("<element_reference>").removeAttr("style");

它将删除之前应用的样式，将元素恢复为正常视图。

或者您也可以将位置从“绝对”更改为“静态”，两者都会得到相同的结果。 Refer this question 使用 jQuery 动画位置。

希望对你有帮助。

【讨论】：

【解决方案2】：

我发现最简单的方法是：

为项目添加 CSS 过渡属性。
创建一个新类，当它被单击时添加到项目中，使其全屏显示。关闭项目时下课。

CSS 过渡往往更快更流畅。

【讨论】：