Запускать и исчезать CSS-анимацию с помощью JavaScript - работает только в одном направлении?

Я пытаюсь создать меню, которое исчезает и исчезает при нажатии. Это код:

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 срабатывает, а через две секунды после завершения анимации меню удаляется. Почему это работает не так, как ожидалось?