我之前一直在尝试构建一个移动web界面，尽量保持简单。我添加了一个按钮，通过为包含动画的菜单分配一个类，将固定位置的菜单滑动到屏幕上。它看起来不错，似乎是工作，所以我添加了逆。然而，当点击将菜单滑出屏幕时，动画不会播放，只是消失。动画也不播放，当点击后，使菜单回到屏幕上的第一次。
这是我的代码。任何帮助理解为什么这不是我所期望的工作(即。动画应该重置并充分播放每次重新分配类)将非常有帮助。
<script>
function setup(e){
document.getElementById("menuButton").addEventListener("click", menuShow, false);
}
function menuShow(){
var menu = document.getElementById("menu");
if(menu.classList.contains("hiding")||
menu.classList.contains("hidden")){
menu.classList.add("showing");
menu.classList.remove("hiding");
menu.classList.remove("hidden");
}else{
menu.classList.add('hiding');
menu.classList.remove('showing');
};
}
</script>
<style>
#menu{
position:fixed;
color:white;
background-color:#f99;
width:100px;
#menu.showing{
animation: 0.15s ease-out 0s 1 forwards popoutRight;
}
#menu.hiding{
animation: 0.15s ease-out 0s 1 backwards popoutRight;
}
@keyframes popoutRight {
from {right: -100px;}
to {right: 0px;}
}
</style>
<body>
<div id="menuButton">
<h2>Show Menu</h2>
</div>
<ul id="menu" class="hidden">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
如果您必须使用animation，我建议使用单独的关键帧集，并将right的值设置为触发动画之前的值。增加的.hidden和.shown类处理此问题:
function menuShow() {
var mclist = document.getElementById("menu").classList;
if (mclist.contains("showing")) {
mclist.remove('showing');
mclist.remove("hidden");
mclist.add('shown');
mclist.add('hiding');
} else {
mclist.remove('hiding');
mclist.remove('shown');
mclist.add("hidden");
mclist.add("showing");
}
}#menu {
position: fixed;
color: white;
background-color: #f99;
width: 100px;
}
#menu.hidden {
right: -100px;
}
#menu.shown {
right: 0px;
}
#menu.showing {
animation: 0.15s ease-out 0s 1 normal forwards popoutRight;
}
#menu.hiding {
animation: 0.15s ease-in 0s 1 normal forwards popinRight;
}
@keyframes popoutRight {
0% {right: -100px;}
100% {right: 0px;}
}
@keyframes popinRight {
0% {right: 0px;}
100% {right: -100px;}
}<body>
<div id="menuButton" onClick="menuShow();">
<h2>Show Menu</h2>
</div>
<ul id="menu" class="hidden">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>然而，transition更容易，如果它被触发，而在过渡的中间，它将使用right的当前值导致没有抖动。
function menuShow() {
var mclist = document.getElementById("menu").classList;
if (mclist.contains("shown")) {
mclist.remove('shown');
mclist.add("hidden");
} else {
mclist.remove('hidden');
mclist.add("shown");
}
}#menu {
position: fixed;
color: white;
background-color: #f99;
width: 100px;
right: -100px;
}
#menu.hidden {
right: -100px;
transition: right 0.15s ease-in;
}
#menu.shown {
right: 0px;
transition: right 0.15s ease-out;
}<body>
<div id="menuButton" onClick="menuShow();">
<h2>Show Menu</h2>
</div>
<ul id="menu" class="hidden">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>