html - 不悬停时悬停动画不会消失

Question

我有一个悬停动画的 div。但是，当我不悬停时，div 不会消失

这就是整个过程的样子:http://jsfiddle.net/Vbxtc/

这是 html:

    <nav>
       <div id="controls">
            <button id="playButton">Play</button>      
            <div id="defaultBar">
                <div id="progressBar"></div>
            </div>
            <button id="vol" onclick="level()">Vol</button>
            <button id="mute">Mute</button>
            <button id="full" onclick="toggleFullScreen()">Full</button>
        </div> 
       <div id="playlist" class="animated fadeInRight">
            <div>cats</div>
            <div>cats</div>
            <div>cats</div>
        </div>
    </nav>

这是我制作的 CSS:

#playlist{
    position:absolute;
    display:block;
    border:1px solid red;
    height: 82%;
    width: 25%;
    top: 20px;
    right: 0px;
    z-index: 2;
    float:right;
    padding: 0px;
    margin: 0px; 
    color:white;
    background-color:#999999;
    opacity: 0;
}
#playlist:hover {
    opacity: 1;
}

这是我正在尝试的动画

.animated:hover {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

Answer 1

我注意到，当您将鼠标放在正确的位置上(悬停大约 1 秒并将鼠标向上移动)时，它确实会很好地淡出。

另一件事是，如果您按如下方式添加类 fadeOutRight:

<div id="playlist" class="animated fadeInRight fadeOutRight">

它消失得太快了。

我知道我帮不了什么忙，但答案在于时机。

另外，如果你有 fadeOutRight 类，例如，侧边栏，它工作得很好!

<aside id="sidebar" class="fadeOutRight">

也许，将 fadeOutRight 类放在除 fadeInRight div 之外的所有内容上。