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

问题描述：

有没有一种方法可以为刚添加到窗口或从窗口中删除的div创建CSS3转换/动画，或者只是指定其样式？一种情况是选项卡控件，当点击标签标题时内容已经转换;这通常是通过分配不同的CSS样式到包含内容（无转移）的股利做到这一点要显示：div添加/删除/样式的CSS3过渡/动画更改？

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

它发生，我认为大多数的例子在那里被触发使用CSS3过渡通过：悬停。

答

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

我会选择后者。

[示例（非选择器）]（https://developer.mozilla.org/samples/cssref/transitions/sample1/） – mobileTofu 2011-06-07 17:11:36

基本上这个想法是有2种风格（你需要明确地设置你想要的属性在每个样式中设置动画）并指定样式以开始动画到目标元素。然后，在页面加载时，您会听取元素的“transitionend”事件，然后在该处指定您希望动画结束的样式。 :) – mobileTofu 2011-06-07 22:38:13

答

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

CSS：

.elementInactive { 
    display:none; 
}

的jQuery：

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

对于换用另一个风格（不是一个动画）：我会用样式表:hover财产。对这个属性的支持可以追溯到CSS3之前，所以它是一个安全的解决方案。 IE具有使用与一个 'DIV' 元素问题：悬停，所以使用一个 'A' 与显示元件：块来对待它像一个div：

CSS：

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

答

试试：

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上看到这个活。

不适合我在铬合作 – BumbleB2na 2011-06-07 16:50:24

哎呀，你点击并按住 - 作品+1 – BumbleB2na 2011-06-07 16:51:22

如果你不想*点击并按住*，你可以悬停或使用jQuery。试试这个：http://jsfiddle.net/kongr45gpen/7J2M6/4/ – kongr45gpen 2011-06-07 16:58:25

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

相关推荐