我有 id='mainmenu' 的 div。我在单击按钮后通过 JavaScript 向它添加 CSS3 过渡(通过将“过渡”添加到 #mainmenu 并创建将添加到 div 元素的类 .fadein 和 .fadeout )。代码:
<div id='mainmenu'></div>
<button id="btn1">Click me1</button>
<button id="btn2">Click me2</button>
#mainmenu {
width:100px;
height:100px;
background:#eee;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
.fadeout {
opacity:0;
}
.fadein {
opacity:1;
}
var menu = document.getElementById('mainmenu'),
btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
}
问题是现在我想添加 display none 和 block 到淡出和淡入选项。所以在淡出动画 div 之后应该显示无,并且在淡入显示块之后:
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
menu.style.display = 'none';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
menu.style.display = 'block';
}
不幸的是, display none 和 block 与动画一起执行,所以动画不起作用(元素得到 display none,没有不透明动画)。我首先想要具有不透明度的动画,然后显示元素的无/块。有什么办法吗?我只能使用纯 JavaScript(没有 jQuery 等)。