17

次のコードを使用して、ホバー時に非表示の div を表示しています。transition非表示の div をフェードインするためにCSS プロパティを使用しています。CSS のみを使用してフェードインする代わりに、非表示の (たとえば、左から右に) div をスライドすることは可能ですか? これが私のコードです：

HTML

<div class="box">
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a>
    <div class="hidden"></div>
</div>

CSS

.box{
    position: relative;    
}

.box .hidden{    
   background: yellow;
    height: 300px;    
    position: absolute;
    top: 0;
    left: 0;    
    width: 500px;
    opacity: 0;    
    transition: all 1s ease;
}

.box:hover .hidden{
    opacity: 1;
}

デモ: http://jsfiddle.net/u2FKM/

4

5 に答える 5

27

このようなもの？

デモ

そして、私が使用したコード：

.box{
    position: relative;
    overflow: hidden;
}

.box:hover .hidden{

    left: 0px;
}

.box .hidden {    
    background: yellow;
    height: 300px;    
    position: absolute; 
    top: 0;
    left: -500px;    
    width: 500px;
    opacity: 1;    
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

また、 を使用して要素を移動できることも付け加えておきますtransform: translate();。この場合、次のように機能します - DEMO nr2

于 2012-12-20T09:20:02.243 に答える
3

ベンダー プレフィックスを追加し、アニメーションを に変更したallので、不透明度と幅の両方がアニメーション化されます。

これはあなたが探しているものですか？http://jsfiddle.net/u2FKM/3/

于 2012-12-20T09:19:49.137 に答える
2 
transition-property:width;

これはうまくいくはずです。ブラウザに依存するコードが必要です

于 2012-12-20T09:08:41.690 に答える
1

これはあなたにとって良い解決策かもしれません：この非常に小さな変更のようにコードを変更してください

.box{
    position: relative; 
}
.box:hover .hidden{
    opacity: 1;
    width:500px;
}
.box .hidden{
    background: yellow;
    height: 334px; 
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    opacity: 0;
    transition: all 1s ease;
}

ここでデモを見る

于 2012-12-20T09:58:52.293 に答える