使元素适应其整个父元素

Question

我正在创建一个高级管理面板，我正在编辑项目，当我点击编辑项目时，我希望它会填满其父元素的整个空间。然而，我不知道如何使用动画将元素恢复到其原始位置。你有什么想法吗？我迄今为止尝试了以下内容：

这是一个示例：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
        });
    });

});

- Caio Kawasaki

---

使用CSS3来制作动画，而不是JavaScript。这个链接可以帮助你入门。 - Maarten Peels

Answer 1

我发现做这种事情最简单的方法是：

1. 在项目上放置CSS过渡属性。
2. 创建一个新类，当单击该项时将其添加到该项上，使其全屏。关闭项目时请删除该类。

CSS过渡通常更快，更流畅。

- Caitlin M

Answer 2

CSS3过渡效果可以帮助您创建全屏宽度和高度的平滑动画。

但是，如果出于某些原因您仍想使用jQuery实现，这里提供了解决方案：

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

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

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

或者您也可以将位置从“absolute”更改为“static”，两者都会给您相同的结果。参考此问题以使用jQuery动画化位置。

希望能有所帮助。

- Prateek