transition ease-in-out;

Question

私は単純なトランジトンを使用しようとしていますが、なぜ動作していないのかわかりません。私たちを手伝ってくれますか？私は例としてこれを使用

.container{ 
    width:250px; 
    height:300px; 
    background:#00f; 
    position:relative; 
    transition: ease-in-out; 
} 

.show{ 
    display: none; 
    position:absolute; 
    bottom:0; 
    height:50%; 
    width:100%; 
    color:#000; 
    text-indent:5px; 
    background:rgba(255,255,255,.5); 
} 

.container:hover > .show{ 
    display:block; 
} 

http://jsfiddle.net/mAzsL/44/

：私は

に...容器に私のコードをtransition: ease-in-out;を入れhttp://jsfiddle.net/n7Ne9/53/

UPDATE： 私の目的は、効果を得るために呼び出されました「箱に入っていく」 - 私は正確ではなかった、申し訳ありません。

Answer 1

アップデート：新しい要件に

、トランジション効果が異なることが必要であり、以下のスニペットを参照してください。

.container { 
 
    width: 250px; 
 
    height: 300px; 
 
    background: #00f; 
 
    position: relative; 
 
} 
 

 
.show { 
 
    position: absolute; 
 
    opacity:0; 
 
    height:30%; 
 
    bottom:0px; 
 
    left:0px; 
 
    right:0px; 
 
    color: #000; 
 
    text-indent: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    transition: opacity 0.5s ease-in-out; 
 
} 
 

 
.container:hover>.show { 
 
    opacity:1; 
 
}

<div class="container"> 
 
    <div class="show">Lorem </div> 
 
</div>

旧回答：問題が transitionプロパティは、CSSプロパティ display:noneに適用することはできませんされて

、これを回避するには、最初に0PXする高さを設定することで、あなたが直面する問題は、テキストがまだ画面に表示されるということです。このオーバーフローするテキストを非表示にするには、CSSクラスoverflow:hiddenを使用して、要素の外にあるコンテンツを非表示にします。また、親要素でtransitionを使用する代わりに、要素自体で直接transitionを使用します。以下のクラスを参照してください。

.show{ 
    position:absolute; 
    overflow:hidden; 
    bottom:0; 
    height:0px; 
    width:100%; 
    color:#000; 
    text-indent:5px; 
    background:rgba(255,255,255,.5); 
    transition: height 1s ease-in-out; 
} 

遷移プロパティは次のとおりです。

transition: height 1s ease-in-out; 

最初に、どのプロパティにトランジション効果があるかを明記してください。その後、移行の継続時間は、ease-inか他の設定かどうか。

次に、ホバー上で元の高さを設定します。移行が表示されます。

.container:hover > .show{ 
    height:50%; 
} 

.container { 
 
    width: 250px; 
 
    height: 300px; 
 
    background: #00f; 
 
    position: relative; 
 
} 
 

 
.show { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    bottom: 0; 
 
    height: 0px; 
 
    width: 100%; 
 
    color: #000; 
 
    text-indent: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    transition: height 1s ease-in-out; 
 
} 
 

 
.container:hover>.show { 
 
    height: 50%; 
 
}

<div class="container"> 
 
    <div class="show">Lorem </div> 
 
</div>