Question

有没有办法让一个div刚刚被添加到窗口中或从窗口中移除的div3或者只是分配了它的样式？一种情况是选项卡控件，其中内容在单击选项卡标题时进行转换;这通常是通过为包含要显示的内容（无转换）的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上看到这一点。

Answer 2

无法像这样触发CSS。你必须使用JavaScript来为该元素添加一个类并让CSS为它设置动画（我怀疑它会起作用），或者直接用JavaScript动画它。

我会选择后者。

Answer 3

对于过渡/动画：我会使用jQuery，因为您可以将事件委托给尚未创建的元素。你也有更多的控制权，如果你使用jQuery添加/删除元素，那么你可以同时添加动画。

的CSS：

.elementInactive {
    display:none;
}

jquery的：

$('tabs-content > div').hover(function() {
    $(this).toggleClass('elementInactive');
});

将一种风格与另一种风格（不是动画）交换：我会使用css':hover属性。对这个属性的支持可以追溯到CSS3之前很久，因此它是一个安全的解决方案。 IE在使用'div'元素时遇到问题：hover，所以使用带有display：block的'a'元素将其视为div：

的CSS：

tabs-content > a:hover {display:block;}
tabs-content > a {display:none;}

div添加/删除/样式的CSS3过渡/动画改变了吗？

3 个答案: