避免关键帧动画溢出导航中的子菜单

Question

我有以下HTML 和CSS，您也可以在 JSfiddle here 中找到它们：

/* Header & Naviagtion */

.header {
  width: 100%;
  height: 10%;
  position: fixed;
}

.navigation {
  width: 100%;
  height: 100%;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: purple;
}

.panel {
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  width: 100%;
  position: absolute;
  top: 100%;
  background-color: lime;
}

.button:hover .panel {
  transform: scale(1);
}



/* Content Animation */

.parent{
 margin-top: 5%;
 height: 10%;
 width: 100%;
 float: left;
 position: relative;
}
 
.content1{
 height: 100%;
 width: 100%;
 background-color: blue;
 float: left;
 position: absolute;
}
 
 .content2{
 height: 100%;
 width: 100%;
 background-color: red;
 float: left;
 animation-delay: 1s;
  position: absolute;
}
 
 .content3{ 
 height: 100%;
 width: 100%;
 background-color:yellow;
 float: left;
 animation-delay: 2s;
 position: absolute;
}
 
.content4{
 height: 100%;
 width: 100%;	
 background-color: green;
 float: left;
 animation-delay: 3s;
 position: absolute;
}
 
.content5{
 height: 100%;
 width: 100%;
 background-color: lime;
 float: left;
 animation-delay: 4s;
}


.parent div {
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:infinite;
 animation-fill-mode: forwards;
 opacity:0;
 }

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%, 25%, 100% {
    opacity: 0
  }
}

<div class="header">	
  <nav class="navigation"> 
    <ul>
    <li class="button"> 1.0 Main Menu 
      <ul class="panel">
        <li> 1.1 Sub Menu </li>
        <li> 1.2 Sub Menu </li>
      </ul>
    </li>
    </ul>
  </nav>     
</div>	


<div class="parent">
	<div class="content1">Here goes content1</div>
	<div class="content2">Here goes content2</div>
	<div class="content3">Here goes content3</div>
	<div class="content4">Here goes content4</div>
	<div class="content5">Here goes content5</div>
 </div>

正如您在 cmets 中看到的，代码分为两部分：

第 1 部分： Navigation 和 panel 可在 button 悬停时显示子菜单。
第 2 部分：使用 CSS keyframes 的 content 的自动化 animation。

两个部分单独工作正常。

---

现在我的问题是内容的animation 溢出了navigation 的panel，这是由animation 的absolute 位置引起的。但是，我需要这个 absolute 位置来制作动画，因为我想让 content1 直到 content5 显示在彼此之上。

另一方面，我也想要navigation 不会被animation 溢出。

你知道我该如何解决这个难题吗？

Answer 1

您将导航放置在固定位置，因此如果它缩放不会影响页面中的其他元素，即您示例中的动画元素。

您需要将其放置在没有固定位置的位置。此外，您不能使用缩放变换，因为以后缩放它不会影响父高度。您可以使用height: 0px 作为默认状态，悬停后使用height: unset。

这是一个例子：

/* Header & Naviagtion */
.header {
  width: 100%;
}

.navigation {
  width: 100%;
  height: 100%;
}

.button {
  width: 100%;
  background-color: purple;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.panel {
  max-height: 0px;
  overflow: hidden;
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  background-color: lime;
}

.button:hover .panel {
  max-height: unset;
  transform: scale(1);
}


/* Content Animation */

.parent {
  margin-top: 5%;
  height: 10%;
  width: 100%;
  float: left;
  position: relative;
}

.content1 {
  height: 100%;
  width: 100%;
  background-color: blue;
  float: left;
  position: absolute;
}

.content2 {
  height: 100%;
  width: 100%;
  background-color: red;
  float: left;
  animation-delay: 1s;
  position: absolute;
}

.content3 {
  height: 100%;
  width: 100%;
  background-color: yellow;
  float: left;
  animation-delay: 2s;
  position: absolute;
}

.content4 {
  height: 100%;
  width: 100%;
  background-color: green;
  float: left;
  animation-delay: 3s;
  position: absolute;
}

.content5 {
  height: 100%;
  width: 100%;
  background-color: lime;
  float: left;
  animation-delay: 4s;
}

.parent div {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%,
  25%,
  100% {
    opacity: 0
  }
}

<div class="header">
  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="panel">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>


<div class="parent">
  <div class="content1">Here goes content1</div>
  <div class="content2">Here goes content2</div>
  <div class="content3">Here goes content3</div>
  <div class="content4">Here goes content4</div>
  <div class="content5">Here goes content5</div>
</div>