1

我有一个悬停动画的 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);
    }
}
4

2 回答 2

0

在悬停状态下使用元素位置并不是一个好主意。即使你能正确地编程（这并不容易），大多数时候用户也不会理解发生了什么。

你可以得到闪烁的场景，在没有用户移动光标的情况下，你的 div 离开光标位置，取消悬停，div 重新进入光标，悬停触发，等等。

我建议在另一个 div 上触发悬停，该 div 覆盖移动 div 所在的整个区域。

于 2013-02-11T17:30:17.163 回答
0

我注意到，当您将鼠标准确计时（悬停约 1 秒并将鼠标向上移动）时，它确实会很好地淡出。

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

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

它消失得太快了。

我知道我没有多大帮助，但答案在于时机。

此外，如果您在侧边栏上设置了 fadeOutRight 类，它会很好地工作！

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

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

于 2013-02-10T04:23:20.843 回答