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

マウスのタイミングを正確に合わせると（約1秒間カーソルを合わせて、マウスを上に移動すると）、うまくフェードアウトすることに気づきました。

もう1つは、次のようにクラスfadeOutRightを追加した場合です。

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

フェードアウトが速すぎます。

あまり役に立たなかったのは知っていますが、答えはタイミングにあります。

また、たとえばサイドバーにfadeOutRightクラスがある場合は、うまく機能します。

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

おそらく、fadeInRightdivを除くすべてにfadeOutRightのクラスを配置します。

于 2013-02-10T04:23:20.843 に答える
0

ホバー状態で要素の位置をいじるのはお勧めできません。正しくプログラムできたとしても (それは簡単ではありません)、ほとんどの場合、ユーザーは何が起こっているのか理解できません。

ユーザーがカーソルを動かさなくても、div がカーソル位置を離れる、ホバーをキャンセルする、div がカーソルを再入力する、ホバーがトリガーされるなど、ちらつきのシナリオが発生する可能性があります。

移動する div がある領域全体をカバーする別の div でホバーをトリガーすることをお勧めします。

于 2013-02-11T17:30:17.163 に答える