css - CSS3 トランジションの問題

Question

CSS3トランジションを使用してやりたいことを行う方法がよくわかりません。私はそれらを使用するのが初めてなので、本当に助けが必要です:)

これが私が取り組んでいるものを含む JSFiddleです。

したがって、基本的にdiv.portletは、爆発内にあるものを表示するウィンドウであると想定されています。をクリックするとrportletがいっぱいになるように大きくしたいです。div.containeそして、閉じると、通常のサイズに縮小されます。

Answer 1

フェードはトランザクションプロパティではありませんfadeIn。以下に定義するように定義する必要があります。

あなたのコメントのように

試す

div.portlet
{
transition: ease-out 2s;
-moz-transition: ease-out 2s; /* Firefox 4 */
-webkit-transition: ease-out 2s; /* Safari and Chrome */
-o-transition: ease-out 2s; /* Opera */
} 

そしてz-index：3を追加します。todiv.portletおよびz-index：4 to classopen

およびjquery

$(".container").on("click", ".portlet", function(){
    $(".portlet").css("z-index","3");   
    $(this).addClass("open");    
    $(this).css("z-index","333");    
}); 


});