1

親li（この場合はプログラム）のホバーで右から左へのスライドアニメーションを実現したい子ulはアニメーション化して開く必要があります。私はcssでそれをしたいのですが、これはすべてのブラウザでサポートされています..

   .child
   {
    transition: 1s;
    position: absolute;
    left: -100%;
    top: 0;
    padding-left: 10px;
    display: none;
    width: 200px;
   }

私のデモ

4

2 に答える 2

2

CSSを少し変更しました。これは完全な解決策ではありません。完璧にするには、少し遊んでみる必要があります。しかし、それはあなたが達成したいものにかなり近いと思います。

ワーキングデモ

変更した CSS のみを追加します。

.menu-1990:hover > .child {
    display:block;
    opacity:1;
    margin-left:60px;
    height:auto;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;

}
.child {
    transition: 1s;
    margin-left:0px;
    opacity:0;    
    height: 0;
    padding-left: 0px;
    display: block;
    width: 200px;   

}

編集:コメントで述べたように、このソリューションは IE 以外のすべてのブラウザーでのみ機能します。transition-duration プロパティをサポートするのは IE10 だけです

于 2013-08-02T12:45:21.490 に答える
2

JSFiddleを試す

http://jsfiddle.net/2vLjU/50/

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}
于 2013-08-02T12:09:58.600 に答える