css - CSS3 过渡问题

Question

我不太确定如何使用 CSS3 过渡来实现我想要的效果。我刚开始使用它们，所以我真的需要一些帮助:)

这是 JSFiddle与我正在做的事情。

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

Answer 1

fade 不是 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");    
}); 


});