如何顺利淡入淡出

Question

我想点击菜单按钮淡入div 无论如何我实现了它，但是当我非常快速地切换视图时，它有时会闪烁并且行为有点粗糙或跳跃......或者我不知道该怎么说..反正它也不顺利。

https://jsfiddle.net/eLbze55d/12/

任何建议都将受到赞赏。

var m_menu = document.getElementById('m_menu');
var menu = document.getElementById('menu');
var m_staff = document.getElementById('m_staff');
var staff = document.getElementById('staff');
var m_access = document.getElementById('m_access');
var access = document.getElementById('access');

m_menu.addEventListener('click', function() {
    menu.style.zIndex = 1;
    staff.style.zIndex = 0;
    access.style.zIndex = 0;
    menu.style.webkitAnimationName = 'fadein';
    menu.style.webkitAnimationDuration = "1000ms";
});

menu.addEventListener('webkitAnimationEnd', function() {
    menu.style.opacity = 1;
    staff.style.opacity = 0;
    access.style.opacity = 0;
    menu.style.webkitAnimationName = '';
});

m_staff.addEventListener('click', function() {
    staff.style.zIndex = 1;
    menu.style.zIndex = 0;
    access.style.zIndex = 0;
    staff.style.webkitAnimationName = 'fadein';
    staff.style.webkitAnimationDuration = "1000ms";
});

staff.addEventListener('webkitAnimationEnd', function() {        
    staff.style.opacity = 1;
    menu.style.opacity = 0;
    access.style.opacity = 0;
    staff.style.webkitAnimationName = '';
});

m_access.addEventListener('click', function() {
    access.style.zIndex = 1;
    menu.style.zIndex = 0;
    staff.style.zIndex = 0;
    access.style.webkitAnimationName = 'fadein';
    access.style.webkitAnimationDuration = "1000ms";
});

access.addEventListener('webkitAnimationEnd', function() {        
    access.style.opacity = 1;
    menu.style.opacity = 0;
    staff.style.opacity = 0;
    access.style.webkitAnimationName = '';
});

@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

html,body { height:100%; }
#main {
    height:100%;
    color: white;
}
.content{    
    font-size: 50pt;    
}
#menu {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;    
    background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/7B62IKGVF4.jpg);
    height: 100%;
    width: 100%;
}
#staff {
    z-index: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/FRHYAEUPIN.jpg);
    height: 100%;
    width: 100%;
}
#access{
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/MGWWJDK49D.jpg);
    height: 100%;
    width: 100%;
}
#site_menu {
    z-index: 2;
    position: absolute;
    bottom: 2%;
    left: 3.5%;
    font-size: 20pt;
    display: flex;
    justify-content: start;
}
#site_menu > div {
    cursor: pointer;
    margin: 20px;
    display: flex;
    align-items: center;
    justify-content: start;
}

<div id="main">
    <div id="menu" class="content">THIS IS MENU</div>    
    <div id="staff" class="content">THIS IS STAFF</div>
    <div id="access" class="content">THIS IS ACCESS</div>
    <div id="site_menu">
        <div id="m_menu" class="menuelem">Menu</div>
        <div id="m_staff" class="menuelem">Staff</div>
        <div id="m_access" class="menuelem">Access</div>
    </div>
</div>