使用JavaScript触发CSS动画淡入淡出 - 仅适用于一个方向？

Question

我正尝试构建一个淡入淡出的菜单。这是代码：

HTML

<div id="trigger">CLICK</div> 

<ul data-status="shown" id="navi"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul> 

CSS

@keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; display: block; } 
} 

ul { 
    background: grey; 
} 

ul[data-status="shown"] { 
    opacity: 1; 
    animation: fade 2s; 
} 

ul[data-status="hidden"] { 
    opacity: 0; 
    animation: fade 2s; 
    animation-direction: reverse; 
} 

ul[data-status="removed"] { 
    display: none; 
} 

的JavaScript

function myMenu() { 
    var trigger = document.getElementById('trigger'), 
     menu = document.getElementById('navi'), 
     state = menu.getAttribute('data-status'); 

    if (state == 'shown') { 
     menu.removeAttribute('data-status'); 
     menu.setAttribute('data-status', 'removed'); 
     state = menu.getAttribute('data-status'); 
    } 

    var toggle = function() { 
     if (state == 'shown') { 
      menu.removeAttribute('data-status'); 
      menu.setAttribute('data-status', 'hidden'); 
      setTimeout(function() { 
       menu.removeAttribute('data-status'); 
       menu.setAttribute('data-status', 'removed'); 
       state = menu.getAttribute('data-status'); 
      }, 2000); 
     } 

     if (state == 'removed') { 
      menu.removeAttribute('data-status'); 
      menu.setAttribute('data-status', 'shown'); 
      state = menu.getAttribute('data-status'); 
     } 
    }; 

    trigger.addEventListener('click', toggle, false); 

} 

myMenu(); 

例子：http://jsbin.com/avUWUnO/1/edit

淡入作品如预期，但淡化o ut实际上不存在，菜单就消失了。或者，也许是因为我点击得太快？然后在那里有一些奇怪的延迟，错误可能是我使用setTimeout，但我不能发现那里有什么问题。

的状态设置为隐藏，则CSS动画火灾，两秒钟后，当动画完成后，菜单将被删除。为什么这不能按预期工作？

Answer 1

您错过了css属性中的供应商前缀。我改变了任何和所有animation和keyframe选择器，并添加了-webkit-（铬和safari），它的工作。

供应商前缀是-webkit-（Safari和Chrome浏览< 27我认为），-o-是歌剧< 17，IE10是第一个浏览器尼克斯供应商前缀，所以你不必担心，并-moz-是Firefox浏览器。一定要包含前缀版本和非前缀版本。

因此，举例来说，我只是改变了-webkit-：

@-webkit-keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; display: block; } 
} 

@keyframes fade { 
    0% { opacity: 0; } 
    100% { opacity: 1; display: block; } 
} 

ul { 
    background: grey; 
} 

ul[data-status="shown"] { 
opacity: 1; 
-webkit-animation: fade 2s; 
animation: fade 2s; 
} 

ul[data-status="hidden"] { 
    opacity: 0; 
    -webkit-animation: fade 2s; 
    -webkit-animation-direction: reverse; 
    animation: fade 2s; 
    animation-direction: reverse; 
} 

ul[data-status="removed"] { 
    display: none; 
} 

但你也可能要添加前缀的其余部分。

JSBin（感谢Zeaklous这一点。）