为什么使用Javascript触发css转换只能用于删除类？
我将我的代码粘贴到JS Bin上： 如果单击绿色三角形，则不会触发过渡。但是，如果再次单击它，您将看到转换正常工作 我不明白为什么会这样。请有人帮帮我。我希望这能有所帮助 请尝试以下代码为什么使用Javascript触发css转换只能用于删除类？,css,css-transitions,Css,Css Transitions,我将我的代码粘贴到JS Bin上： 如果单击绿色三角形，则不会触发过渡。但是，如果再次单击它，您将看到转换正常工作 我不明白为什么会这样。请有人帮帮我。我希望这能有所帮助 请尝试以下代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Intro</title>
<style>
*{padding:0;margin:0;box-sizing: border-box;}
html,body{width:100%;height:100%;}
.container{margin:auto;width:100%;height:100%;}
.nav{
position:fixed;
left:0;
top:0;
display: block;
background: skyblue;
width: 40%;
height: 100%;
padding: 10px 0 10px 0;
opacity: 1;
}
.nav-active{
opacity: 1;
transition: opacity 2s;
-webkit-transition: opacity 2s;
}
.nav > ul{
display: block;
width: 100%;
}
.nav > ul > li {
display: block;
width: 100%;
height: auto;
list-style: none;
}
.nav > ul > li > a{
display: block;
width: 100%;
padding: 5px 5px;
color: white;
font-size: 25px;
text-align: center;
text-decoration: none;
}
.nav > ul > li > a:hover{
background: gray;
color: white;
}
.menu-btn{
display:block;
position:fixed;
top:0; left: 40%;
width:0;height:0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-left: 20px solid green;
border-bottom: 20px solid transparent;
}
.menu-btn-left{left:0;}
.nav-hidden{left:-100000px;opacity:0;}
</style>
<script>
var notClicked = true;
function popMenu(event){
event.preventDefault();
var nav = document.getElementsByClassName('nav')[0];
var navHidden = document.getElementsByClassName('nav-hidden')[0];
var btn = document.getElementsByClassName('menu-btn')[0];
if(notClicked){
nav.classList.remove('nav-active');
nav.classList.add('nav-hidden');
btn.classList.add('menu-btn-left');
}else{
nav.classList.remove('nav-hidden');
nav.classList.add('nav-active');
btn.classList.remove('menu-btn-left');
}
notClicked = !notClicked;
}
</script>
</head>
<body>
<div class="container">
<a href="" class="menu-btn" onclick="popMenu(event);"></a>
<nav class="nav nav-active">
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<script>
</script>
</body>
</html>
简介
*{填充：0；边距：0；框大小：边框框；}
html，正文{宽度：100%；高度：100%；}
.container{边距：自动；宽度：100%；高度：100%；}
.导航{
位置：固定；
左：0；
排名：0；
显示：块；
背景：天蓝色；
宽度：40%；
身高：100%；
填充：10px 0 10px 0；
不透明度：1；
}
.导航激活{
不透明度：1；
过渡：不透明度2s；
-webkit转换：不透明度2s；
}
.nav>ul{
显示：块；
宽度：100%；
}
.nav>ul>li{
显示：块；
宽度：100%；
高度：自动；
列表样式：无；
}
.nav>ul>li>a{
显示：块；
宽度：100%；
填充物：5px 5px；
颜色：白色；
字体大小：25px；
文本对齐：居中；
文字装饰：无；
}
.nav>ul>li>a:悬停{
背景：灰色；
颜色：白色；
}
.菜单btn{
显示：块；
位置：固定；
顶部：0；左侧：40%；
宽度：0；高度：0；
边框顶部：20px实心透明；
右边框：20px实心透明；
左边框：20px纯绿；
边框底部：20px实心透明；
}
.menu btn left{left:0；}
.nav隐藏{左：-100000px；不透明度：0；}
var=true；
功能菜单（事件）{
event.preventDefault（）；
var nav=document.getElementsByClassName（'nav'）[0]；
var navHidden=document.getElementsByClassName（'nav-hidden'）[0]；
var btn=document.getElementsByClassName（'menu-btn'）[0]；
如果（未单击）{
nav.classList.remove（'nav-active'）；
nav.classList.add（'nav-hidden'）；
btn.classList.add（'menu-btn-left'）；
}否则{
nav.classList.remove（'nav-hidden'）；
nav.classList.add（'nav-active'）；
btn.classList.remove（'menu-btn-left'）；
}
notClicked=！notClicked；
}