触发CSS动画淡入&使用JavaScript淡出 - 只能在一个方向上工作?

时间:2013-10-19 13:43:14

标签: javascript html css animation

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

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动画触发,两秒钟后动画结束时,菜单将被删除。为什么这不按预期工作?

1 个答案:

答案 0 :(得分:1)

您错过了css属性中的供应商前缀。我更改了所有animationkeyframe选择器并添加了-webkit-(chrome和safari),但它确实有效。

供应商前缀为-webkit-(safari,我认为chrome&lt; 27),-o-是opera&lt; 17,IE10是第一个nix供应商前缀的浏览器,所以你不必担心,-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。)