html - 添加/删除/样式更改的 div 的 CSS3 转换/动画？

Question

有没有办法为刚刚添加到窗口或从窗口中删除的 div 或仅分配其样式的 div 使用 CSS3 转换/动画？一种情况是选项卡控件，当单击选项卡标题时内容会发生转换；这通常是通过为包含要显示的内容(无过渡)的 div 分配不同的 CSS 样式来完成的:

    tabs-content > div{display:none;}
    tabs-content > div.active{display:block;}

在我看来，大多数示例都使用由 :hover 触发的 CSS3 转换。

Answer 1

试试这个:

tabs-content > div{
    opacity:0;
    -moz-opacity:0;
    -webkit-opacity:0;
    transition-duration:1s;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
}
tabs-content:active > div{
    opacity:1;
    -moz-opacity:1;
    -webkit-opacity:1;
}

你可以在 jsFiddle 上看到这个直播.