Question

我有一个像这样的元素列表：

<div class="outer">
  <div class="inner first">First</div>
  <div class="inner">Second</div>
</div>

如果我应用以下样式

.inner {
   height: 30px;
   margin: 10px;
}

.first {
   height: 0;
   margin: 0;
   overflow: hidden;
}

并且假设填充和边框已经为0，元素的存在仍然占据一些空间（可能是因为元素的边缘被吹掉），如果元素显示它就不会存在属性设置为none。

当我使用CSS动画使第一个元素消失而第二个元素顺利出现时，这会导致问题。请参阅下面的代码段

＆＃13;

$(".first").addClass("hide").bind("webkitAnimationEnd animationEnd", function () {
  $(".first").addClass("hidden")
  });

＆＃13;

.inner {
  background: red;
  margin: 10px;
  height: 30px;
  text-align: center;
  overflow: hidden;
}

.hide {
  animation-name: disappear;
  animation-duration: 2s;
}

.hidden {display: none}

@keyframes disappear {
  from {
    height: default;
    margin: default;
  }
  to {
    height: 0;
    margin: 0;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner first">First</div><div class="inner">Second</div>
</div>

＆＃13;

在这种情况下，我如何设法让第一个元素消失，然后我可以将它从页面中完全删除？

请注意，我已经在SO上遇到了类似的问题，这不是导致问题的两个元素之间的空白情况。

Answer 1

添加css，如：

body{margin: 0;}

没有高度，边距，填充或边框的元素仍然占据空间，因为其下方元素的边距

1 个答案: