避免关键帧动画溢出导航子菜单 [英] Avoid that keyframe animation overflows submenus in navigation

问题描述

我有以下 HTML 和 CSS ，您也可以在JSfiddle中找到此处：

I have the following HTML and CSS which you can also find in the 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>

您可以在评论中看到代码分为两部分：

As you can see in the comments the code is divided in two parts:

第1部分： 导航和面板在按钮悬停时显示子菜单。

第2部分：使用内容的自动化动画 CSS 关键帧。

Part 1: Navigation with a panel to display submenus when the button is hovered.
Part 2: An automated animation of a content using CSS keyframes.

两个部分都可以正常工作。

Both parts individually work fine.

现在，我的问题是内容的动画溢出了面板导航的c>，这是由于动画绝对位置$ c>。但是，我需要这个绝对位置来使动画生效，因为我想拥有 content1 til content5 彼此显示。

Now my issue is that the animation of the content overflows the panel of the navigation which results from the absolute position of the animation. However, I need this absolute position to make the animation work since I want to have content1 til content5 displayed on top of each other.

另一方面，我也希望导航 不会被动画溢出。

On the other side I also want to have navigation that is not overflown by the animation.

您知道我如何解决这个问题困境？

Do you have any idea how I can solve this dilemma?

推荐答案

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

You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.

您需要将其放置在没有固定位置的位置。另外，您不能使用比例变换，因为以后对其进行缩放不会影响父级的身高。您可以将 height：0px 用作默认状态，并且将 height：unset 悬停一次。

You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.

下面是一个示例：

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

这篇关于避免关键帧动画溢出导航子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！