CSS3过渡的麻烦

Question

我不太确定如何使用CSS3过渡来做我想要的。我是新手，所以我真的可以使用一些帮助：）

以下是我正在研究的JSFiddle。

所以，基本上div.portlet应该是一个显示爆炸内容的窗口。当您点击portlet时，我希望它增长以填满div.containe r。当你关闭时，我希望它缩小到正常大小。

Answer 1

fade isnt transact属性要么你需要像下面定义的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;到div.portlet和z-index：4到班级open

和jquery

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


});