CSS3 转换出现问题

Question

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

这是我正在处理的JSFiddle。

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

Answer 1

fade 也不是交易属性，你需要像下面定义的那样定义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");    
}); 

});