Избегайте того, чтобы анимация ключевых кадров переполняла подменю в навигации - PullRequest
Новая
       5

Избегайте того, чтобы анимация ключевых кадров переполняла подменю в навигации

0 голосов
/ 19 ноября 2018

У меня есть следующие HTML и CSS, которые вы также можете найти в JSfiddle здесь : 

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

Как видно из комментариев, код разделен на две части:

Часть 1: Navigation с panel для отображения подменю при наведении button.
Часть 2: Автоматизированный animation content с использованием CSS keyframes.

Обе части по отдельности работают нормально.

Теперь моя проблема в том, что animation содержимого переполняет panel navigation, что является результатом позиции absolute animation. Однако мне нужна эта позиция absolute, чтобы анимация работала, поскольку я хочу, чтобы content1 til content5 отображались друг над другом.

С другой стороны, я также хочу иметь navigation, который не переполняется animation.

У вас есть идеи, как я могу решить эту дилемму?

1 Ответ

0 голосов
/ 20 ноября 2018

Вы установили навигацию с фиксированной позицией, поэтому, если она масштабируется, это не повлияет на другие элементы на странице, анимированный элемент в вашем примере.

Вам необходимо разместить ее без фиксированной позиции.Кроме того, вы не можете использовать масштабное преобразование, поскольку позднее его масштабирование не повлияет на родительскую высоту.Вы можете использовать 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>
...