我在这里粘贴了代码:
https://jsfiddle.net/JTBennett/sdydw4L6/ [CSS - 顶部的fadein东西,底部的导航东西]
但如果你想在浏览器中查看实际问题,请复制+粘贴以下内容... jsfiddle以某种方式修复它。
HTML:
<header class="masthead" style="z-index:9999; top:30%;">
<nav>
<div class="nav-container">
<div id="fadein-menu-1">
<input id="slider1" name="slider1" type="checkbox">
<label class="slide has-child" for="slider1">
<span class="element">Vi</span>
<span class="name">V:HCC</span>
</label>
<div class="child-menu">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
<div id="fadein-menu-2">
<a class="slide" href="#">
<span class="element">Cd</span>
<span class="name">Cadence</span>
</a>
</div>
<div id="fadein-menu-3">
<input id="slider2" name="slider2" type="checkbox">
<label class="slide has-child" for="slider2">
<span class="element">Cp</span>
<span class="name">Capture</span>
</label>
<div class="child-menu">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
<a href="#">Option 4</a>
<a href="#">Option 5</a>
<a href="#">Option 6</a>
</div>
</div>
<div id="fadein-menu-4">
<a class="slide" href="#">
<span class="element">Ea</span>
<span class="name">V:EA</span>
</a>
</div>
</header>
CSS:
/* Delayed Fade-In CSS */
#fadein-menu-1 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1s 1 forwards;
}
#fadein-menu-2 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1.2s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1.2s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1.2s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1.2s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1.2s 1 forwards;
}
#fadein-menu-3 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1.4s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1.4s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1.4s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1.4s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1.4s 1 forwards;
}
#fadein-menu-4 {
opacity:0;
-webkit-animation: fadein 1s ease-in 1.6s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1.6s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1.6s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1.6s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1.6s 1 forwards;
}
@keyframes fadein {
{ 0% { opacity:0; } 100% { opacity:1; } }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Navigation */
a {
text-decoration: none;
}
.masthead {
font-family: "Open Sans", sans-serif;
}
nav {
display: table;
position: relative;
table-layout: fixed;
width: 100%;
}
nav input {
display: none;
}
nav label {
margin: 0;
}
nav div.nav-container {
display: table-row;
}
nav div.nav-container > div {
display: table-cell;
}
nav div.nav-container > div:nth-of-type(5n+1) .slide, nav div.nav-container > div:nth-of-type(5n+1) a {
border-color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+1) .slide:hover, nav div.nav-container > div:nth-of-type(5n+1) a:hover {
color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+1) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+1) a ~ .child-menu {
background-color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+1) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+1) .slide.active ~ label {
color: #186eb5;
}
nav div.nav-container > div:nth-of-type(5n+2) .slide, nav div.nav-container > div:nth-of-type(5n+2) a {
border-color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+2) .slide:hover, nav div.nav-container > div:nth-of-type(5n+2) a:hover {
color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+2) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+2) a ~ .child-menu {
background-color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+2) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+2) .slide.active ~ label {
color: #5aab1e;
}
nav div.nav-container > div:nth-of-type(5n+3) .slide, nav div.nav-container > div:nth-of-type(5n+3) a {
border-color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+3) .slide:hover, nav div.nav-container > div:nth-of-type(5n+3) a:hover {
color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+3) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+3) a ~ .child-menu {
background-color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+3) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+3) .slide.active ~ label {
color: #db0a21;
}
nav div.nav-container > div:nth-of-type(5n+4) .slide, nav div.nav-container > div:nth-of-type(5n+4) a {
border-color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+4) .slide:hover, nav div.nav-container > div:nth-of-type(5n+4) a:hover {
color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+4) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+4) a ~ .child-menu {
background-color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+4) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+4) .slide.active ~ label {
color: #6926b8;
}
nav div.nav-container > div:nth-of-type(5n+5) .slide, nav div.nav-container > div:nth-of-type(5n+5) a {
border-color: #FC1DCF;
}
nav div.nav-container > div:nth-of-type(5n+5) .slide:hover, nav div.nav-container > div:nth-of-type(5n+5) a:hover {
color: #b1028d;
}
nav div.nav-container > div:nth-of-type(5n+5) .slide ~ .child-menu, nav div.nav-container > div:nth-of-type(5n+5) a ~ .child-menu {
background-color: #fd4fda;
}
nav div.nav-container > div:nth-of-type(5n+5) input:checked ~ label, nav div.nav-container > div:nth-of-type(5n+5) .slide.active ~ label {
color: #FC1DCF;
}
nav a, nav label {
-moz-transition-property: color;
-o-transition-property: color;
-webkit-transition-property: color;
transition-property: color;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
nav .slide {
padding: 10px 10px;
font-size: 1em;
display: block;
color: #393939;
border-top: 4px solid transparent;
position: relative;
-moz-transition-property: border-width, color;
-o-transition-property: border-width, color;
-webkit-transition-property: border-width, color;
transition-property: border-width, color;
-moz-transition-duration: 0.1s, 0.2s;
-o-transition-duration: 0.1s, 0.2s;
-webkit-transition-duration: 0.1s, 0.2s;
transition-duration: 0.1s, 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-moz-transition-delay: 0.2s, 0s;
-o-transition-delay: 0.2s, 0s;
-webkit-transition-delay: 0.2s, 0s;
transition-delay: 0.2s, 0s;
}
nav .slide .element {
font-size: 1.25em;
font-weight: 600;
font-style: normal;
display: block;
line-height: 1;
}
nav .slide .name {
font-size: 0.6875em;
position: relative;
}
nav .has-child .name:after {
content: "";
width: 10px;
height: 4px;
background-image: url("http://www.elemental-shift.com/remote-assets/down-arrow.svg");
display: block;
position: absolute;
bottom: -9px;
left: 1px;
background-repeat: no-repeat;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
nav .child-menu {
display: block;
position: absolute;
max-height: 0;
overflow: hidden;
background-color: #393939;
width: 100%;
top: 65px;
left: 0;
z-index: 5000;
-moz-transition-property: max-height;
-o-transition-property: max-height;
-webkit-transition-property: max-height;
transition-property: max-height;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
nav .child-menu a {
color: white;
display: inline-block;
padding: 15px 30px 15px 10px;
font-size: 0.9375em;
}
nav input:checked ~ .child-menu {
max-height: 100px;
-moz-transition-property: max-height;
-o-transition-property: max-height;
-webkit-transition-property: max-height;
transition-property: max-height;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
nav input:checked ~ .has-child .name:after {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
@media only screen and (min-width: 48.0625em) {
nav {
display: block;
table-layout: auto;
}
nav div.nav-container {
display: block;
}
nav div.nav-container > div {
display: block;
margin: 5px 0;
}
nav div.nav-container > div:hover .slide {
border-left-width: 55px;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
nav .slide {
display: block;
width: auto;
border-left: solid 4px #393939;
border-top: none;
}
nav .slide .element {
line-height: 1;
}
nav .child-menu {
display: block;
position: relative;
top: 0;
background-color: transparent !important;
margin-left: 55px;
width: auto;
max-height: 0px;
overflow: hidden;
border-top: none;
}
nav .child-menu a {
color: #393939;
display: block;
padding: 3px 0 3px 10px;
font-size: 0.8125em;
}
nav input:checked ~ div.child-menu {
max-height: 120px;
}
nav input:checked ~ .slide {
border-width: 55px;
}
.masthead {
position: absolute;
top: 0;
left: 0;
width: 150px;
}
}
它实际上在jsfiddle中运行得很好,但是当我在浏览器中运行它时,默认的全尺寸位置(顶部对齐)的子菜单仍然存在0不透明度的问题。在Chrome和Safari中也是如此,并且几乎可以肯定,在动画命令之后,不透明度不会自动解决问题,但是只有在默认的子菜单中才会出现这种情况。如果删除不透明度:0;来自#fadein-menu-1/2/3/4 ID的行,子菜单再次起作用。
我觉得我只是错过了一个明显的,愚蠢的小事......但我找不到它的生命。非常感谢这里的一些帮助。
答案 0 :(得分:0)
问题:
animation: fadein 1s ease-in 1.4s 1 forwards;
您正在尝试淡入具有opacity:0;
的元素。您的动画运行一旦意味着元素淡入,然后元素返回默认样式(opacity:0;
)。所以你看不到那些元素。
解决方案:从默认样式中删除不透明度。
#fadein-menu-1 {
/* Remove from all the elements */
//opacity:0;
-webkit-animation: fadein 1s ease-in 1s 1 forwards; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s ease-in 1s 1 forwards; /* Firefox < 16 */
-ms-animation: fadein 1s ease-in 1s 1 forwards; /* Internet Explorer */
-o-animation: fadein 1s ease-in 1s 1 forwards; /* Opera < 12.1 */
animation: fadein 1s ease-in 1s 1 forwards;
}