如何解决打开导航栏后,过渡删除会发生什么?
当我将鼠标悬停在导航栏上时,它有一个导航栏打开div,它会显示一个提示(类似这样),当我将鼠标悬停在提示上时,提示会消失。 提示已过渡,但是当我打开和关闭导航栏时,过渡将被删除,并且当我将鼠标悬停在提示上时它不会消失。 其代码:
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51,51,0.726)";
document.getElementById("menu-icon-tip").style.opacity = "0";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0,and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51,51)";
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196,196,196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196,196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196,196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196,196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255,255,255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255,255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255,255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255,255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207,207,207);
}
<div class="navbar" id="navbar">
<a href="javascript:void(0)" class="menu-close-btn" onclick="closeNav()">×</a>
<div id="navbar-content" class="navbar-content">
<a href="#">Home</a>
<a href="">item2</a>
<a href="">item3</a>
<a href="">item4</a>
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>
我该怎么办? it is the video
解决方法
您正在使用JavaScript覆盖CSS过渡
您应该删除要在.menu-icon-tip
上应用的所有样式修改
document.getElementById("menu-icon-tip").style.opacity = "0";
和
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
它们没有用,并且弄乱了您的动画。
,您正在覆盖过渡。
使用.active
类并切换该类
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51,51,0.726)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.add('active');
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0,and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51,51)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.remove('active');
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip.active {
opacity: 1;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196,196,196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196,196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196,196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196,196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255,255,255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255,255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255,255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255,255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207,207,207);
}
<div class="navbar" id="navbar">
<a href="javascript:void(0)" class="menu-close-btn" onclick="closeNav()">×</a>
<div id="navbar-content" class="navbar-content">
<a href="#">Home</a>
<a href="">item2</a>
<a href="">item3</a>
<a href="">item4</a>
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。