Question

我正在构建一个简单的下推效果，它会影响两个容器的位置。到目前为止，我已经设法使用fixed定位隐藏容器，同时将其位置更改为打开状态的relative，从而实现了近乎期望的效果。

我想将 平滑过渡 应用于蓝色main div，该div正被隐藏的div向下推，其类为{{1 }}。如何绕过容器的不连贯重排，是否有一种更优雅的方式来实现这一点，而不是在点击时切换定位？（例如.sub-header到fixed

}

目前，当我按预期将定位从relative切换为fixed时，会产生一个间隙，即relative的高度。

注意：当前div的高度是固定值，但我需要这样才能处理.sub-header高度的动态变化。

注意：这应该通过添加自定义类来实现，而不是使用jQuery的嵌套效果，例如.sub-header等。

以下是 Fiddle 。

小提琴分享所需的简单jQuery功能：

.slideToggle

Answer 1

制作position: relative;并为动画添加上边距

$('.trigger').click(function() {
  $('.sub-header').toggleClass('opened');
}).stop();

body {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

header,
.sub-header,
main {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  transition: all .5s ease-in-out;
}

header {
  height: 100px;
  background: tomato;
  z-index: 1000;
  position: relative;
}

.sub-header {
  height: 150px;
  background: gainsboro;/*
  transform: translateY(-200%);*/
  margin-top:-150px;
  left: 0;
  right: 0;
  z-index: 10;
  position: relative;
}

.opened {/*
  transform: translateY(0%);*/
  margin-top:0;
}

main {
  height: 250px;
  background: deepskyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content <a href="#" class="trigger">TRIGGER</a></header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>

<强>更新： -

至于获取-100%，你将它设为浮动并将所有宽度设置为100%

$('.trigger').click(function() {
  $('.sub-header').toggleClass('opened');
}).stop();

body {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

header,
.sub-header,
main {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  transition: all .5s ease-in-out;
}

header {
  width:100%;
  height: 100px;
  background: tomato;
  z-index: 1000;
  position: relative;
}

.sub-header {
  height: 150px;
  width:100%;
  background: gainsboro;/*
  transform: translateY(-200%);*/
  margin-top:-100%;
  left: 0;
  right: 0;
  z-index: 10;
  float:left;
}

.opened {/*
  transform: translateY(0%);*/
  margin-top:0;
}

main {
  width:100%;
  height: 250px;
  background: deepskyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Header content <a href="#" class="trigger">TRIGGER</a></header>
<div class="sub-header">Sub Header content</div>
<main>Main Content</main>

Answer 2

如果我误解了你的问题，请纠正我，但我想对你正在努力实现的目标采取更为简单的方法。尝试更改CSS代码中的相应类：

.sub-header {

  background: gainsboro;
  height: 0;
  -webkit-transition: height .3s linear;
  transition: height .3s linear;
}

.opened {
  height: 150px;
}

这里是fiddle。我的方法并不涵盖所有基础，因为你可以看到隐藏容器中仍然可以看到文本，这在js或css中需要一些额外的解决方法，但我想它比你的更简单，考虑到你的{{ 1}}已修复.sub-container。

修改

对于非固定高度，我的方法有解决方法：

height

但仍需要进行调整 - 当您将.sub-header { background: gainsboro; height: auto; max-height: 0px; -webkit-transition: max-height .3s linear; transition: max-height .3s linear; } .opened { max-height: 400px; } .opened设置为较低值时，max-height会变慢。它并不完美，认为它涵盖了transition s＆＃39;高度相对相似。

Answer 3

请检查一下。我们可以使用边距进行样式设置并保持位置相同relative

$('.trigger').click(function() {
  $('.sub-header').toggleClass('opened');
}).stop();

body {
  font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

header,
.sub-header,
main {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  transition: all .5s ease-in-out;
}

header {
  height: 100px;
  background: tomato;
  z-index: 1000;
  position: relative;
}

.sub-header {
  height: 150px;
  background: gainsboro;
  transform: translateY(-200%);  
  left: 0;
  right: 0;
  z-index: 10;
  /*play with position and margin*/
  position: relative;
  margin-bottom:-200px;
}

.opened {  
  transform: translateY(0%);
  margin-bottom:0;
}

main {
  height: 250px;
  background: deepskyblue;    
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<header>Header content <a href="#" class="trigger">TRIGGER</a></header>
<div class="sub-header">
  <p>Sub Header content</p>
</div>
<main>Main Content</main>

动画div定位重新排列

3 个答案: