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

Trigger CSS animation fade-in & fade-out with JavaScript - only works in one direction?

本文关键字：适用于 方向 一个 CSS 触发 JavaScript 动画 淡入 淡出 使用      更新时间：2023-09-26

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

.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

淡

入按预期工作，但淡出实际上不存在，菜单只是消失。或者也许这是因为我点击得太快？然后那里有一些奇怪的延迟，错误可能是我使用setTimeout的地方，但我无法发现那里出了什么问题。

状态设置为隐藏，CSS动画将触发，两秒钟后，当动画完成时，菜单将被删除。为什么这没有按预期工作？

css 属性中缺少供应商前缀。我更改了所有animation和keyframe选择器并添加了-webkit-（chrome和safari），它起作用了。

供应商前缀是-webkit-的（我认为是 safari 和 chrome <27），-o-是 opera <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

。
相关文章：