Question

我正在创建一个高级管理面板，我正在玩编辑项目的一部分，我喜欢它，当我点击编辑一个项目，他将填充其父项的整个空间，但我不知道如何制作元素回到动画的原始位置，任何想法如何做到这一点？到目前为止我试过这个：

HTML

command! -nargs=+ Cppman silent! call system("tmux split-window cppman " . expand(<q-args>))
autocmd FileType cpp nnoremap <silent><buffer> K <Esc>:Cppman <cword><CR>

SCSS

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

的Javascript

* {
  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;
        }
    }
}

Answer 1

CSS3过渡将帮助您创建全屏宽度和平滑动画。高度。

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

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

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

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

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

希望它有所帮助。

Answer 2

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

在项目上放置CSS过渡属性。
创建一个新单元，在单击它时将其添加到项目上，使其全屏显示。在物品关闭时取下课程。

CSS转换往往更快更顺畅。

使元素适合它的整个父元素

2 个答案: