css - CSS3 过渡的问题

Question

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

这是我正在研究的JSFiddle 。

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

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; to div.portletand z-index:4 to classopen

和jQuery

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


});