divの表示/非表示時の遷移

クラス.socialmenuを持つDIVが表示または非表示になっているときに遷移を表示しようとしています。これは、CSSのコードですが、それは働いていない：divの表示/非表示時の遷移

.socialmenu { 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 30px; 
    background: #333; 
    position: fixed; 
    display: none; 
    transition: 3s all ease; 
}

ここでは完全なコードとJSFiddleです。 jQueryを使ってトランジション/アニメーションを実現するかどうかは気にしません。どんな助け？

出典

2017-12-10 Elaine Byene

表示/非表示の代わりに、fadeIn/fadeOutまたはslideDown/slideUpを使用できます。 –

私は実際にそれを既に試みたが、うまくいかなかった。 fadeIn/fadeOutを使用すると、私はスクロールするときに.socialmenuを奇妙に動かすのに対し、slideDown/slideUpを動かすと違いはありません。両方とも希望の効果を与えません。 –

cssでトランジションエフェクトを設定してもアニメーションが機能しないように見えます。私は 'transition：3s;'を削除しました。今fadein/fadeoutが動作しています：http://jsfiddle.net/qerj9LvL/2/ –

fadeIn（）を使用します。フェードアウト（）; hide（）の代わりに。 show（）; .socialmenuクラスからトランジションエフェクトを削除する

出典

2017-12-10 17:50:48

divの表示/非表示時の遷移

答えて

関連する問題