javascript - 使元素适合它的整个父级

Question

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

这是一支笔:http://codepen.io/anon/pen/WvGONp

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
        });
    });

});

Answer 1

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

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

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

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

它将删除之前应用的样式，将元素恢复到其正常 View 。

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

希望对您有所帮助。