我有以下 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>
正如您在评论中看到的,代码分为两部分:
第 1 部分:导航
,带有面板
,可在悬停按钮
时显示子菜单。
第 2 部分:使用 CSS 关键帧
的内容
的自动化动画
。
两个部分单独工作都很好。
现在我的问题是内容的动画
溢出导航
的面板
,这是绝对
的结果code> 动画
的位置。但是,我需要这个 absolute
位置来使动画工作,因为我想让 content1
直到 content5
显示在彼此之上。
另一方面,我也希望导航
不会被动画
溢出。
你知道我该如何解决这个难题吗?
最佳答案
您将导航放置在固定位置,因此如果它缩放,则不会影响页面中的其他元素,即示例中的动画元素。
你需要放置它,没有固定的位置。此外,您不能使用缩放变换,因为以后缩放它不会影响父级高度。您可以使用 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>
关于html - 避免关键帧动画溢出导航中的子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53378091/