添加/删除/样式更改的 div 的 CSS3 过渡/动画？答案

【问题标题】：CSS3 transition/animation for div added/removed/style changed?添加/删除/样式更改的 div 的 CSS3 过渡/动画？
【发布时间】：2011-06-07 16:20:09
【问题描述】：

有没有办法为刚刚添加到窗口/从窗口中删除或仅指定其样式的 div 设置 CSS3 过渡/动画？一种情况是选项卡控件，其中在单击选项卡标题时内容具有转换；这通常是通过为包含您要显示的内容（无过渡）的 div 分配不同的 CSS 样式来完成的：

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

我突然想到，大多数示例都使用由 :hover 触发的 CSS3 过渡。

【问题讨论】：

标签： html css transition

【解决方案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上看到这个直播。

【讨论】：

如果您不想单击并按住，您可以将鼠标悬停或使用 jQuery。试试这个：jsfiddle.net/kongr45gpen/7J2M6/4
感谢您的代码。我认为您正在对现有跨度使用选择器（“悬停/链接/活动/访问”）；我看到这会触发转换。我的问题是，当您为元素添加/删除/交换样式时是否可以触发转换。

【解决方案2】：

CSS 不能这样触发。您必须使用 JavaScript 向该元素添加一个类并让 CSS 对其进行动画处理（我怀疑它会起作用），或者直接使用 JavaScript 对其进行动画处理。

我会选择后者。

【讨论】：

example (non selector)
基本上这个想法是有 2 种样式（您需要显式设置要在每种样式中设置动画的属性）并将开始动画的样式分配给目标元素。然后在页面加载中，您监听元素的“transitionend”事件，此时您指定您希望动画结束的样式。 :)

【解决方案3】：

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

css:

.elementInactive {
    display:none;
}

jquery:

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

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

css:

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

【讨论】：