为具有绝对定位子项的容器设置动画溢出答案

【问题标题】：animating a container that has absolutely positioned children overflow为具有绝对定位子项的容器设置动画溢出
【发布时间】：2018-01-15 20:53:14
【问题描述】：

我正在滑动一个 100% 宽度和 100% 高度的容器，而另一个容器则从屏幕上移出进行导航，但我的绝对定位项在动画开始时变得可见。 this 问题的第一个答案说有一行代码使溢出，隐藏，但它似乎不起作用。

$(document).ready(function(){
  var hash = location.hash;
  console.log(hash);
  $(window).on("hashchange",function(){
    hash=hash?hash:"#page1";
    $(hash)
    //I have tried adding
    //.css("overflow","hidden");
    .animate({height:"hide"});
    hash = location.hash
    $(hash)
    //I have tried adding
    //.css("overflow","hidden");
    .animate({height:"show"});
  });
  hash?$(hash).toggleClass("page-active"):$("#page1").toggleClass("page-active");
});

这里是jsfiddle

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这是因为您为锚点使用了固定位置，因此它们相对于浏览器定位。而是使用position:absolute 并将其父级设为position:relative，以便它们相对于其容器定位并与它们的容器一起平滑地出现

$(document).ready(function() {
  var hash = location.hash;
  $(window).on("hashchange", function() {
    hash = hash ? hash : "#page1";
    $(hash)
      //I have tried adding
      //.css("overflow","hidden");
      .animate({
        height: "hide"
      });
    hash = location.hash
    $(hash)
      //I have tried adding
      //.css("overflow","hidden");
      .animate({
        height: "show"
      });
  });
  hash ? $(hash).toggleClass("page-active") : $("#page1").toggleClass("page-active");
});

body,
html {
  width: 100%;
  height: 100%;
  text-align: center;
  margin:0;
}

.page1 {
  width: 100%;
  height: 100%;
  background-color: cyan;
  display: none;
  position: relative;
}

.page2 {
  width: 100%;
  height: 100%;
  background-color: lime;
  display: none;
  position: relative;
}

.page-active {
  display: block;
}

a {
  color: black;
  position: absolute;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div class="page1" id="page1">
    hello
    <a href="#page2">go to page2</a>
  </div>
  <div class="page2" id="page2">
    hi
    <a href="#page1">go to page1</a>
  </div>
</body>

【讨论】：

是的，哎呀，我忘了我在尝试的时候把它切换到了 position:fixed，但我认为我更大的容器有 position:fixed 但我猜不是，应该可以解决它