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之外的所有内容上。

Answer 2

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

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

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

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

2 个答案: