CSS3 transition/animation for div added/removed/style changed?

Is there a way to have CSS3 transitio开发者_C百科ns/animations for a div that's just been added to/removed from the window or just has its style assigned? One scenario would be a tab control where the content has transitions when a tab header is clicked; this is normally done by assigning a different CSS style to the div that contains the content (without transition) that you want to display:

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

It occurred to me that most of the examples out there are using CSS3 transitions triggered by :hover.

Try this:

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;
}

You can see this live on jsFiddle.

CSS can't be triggered like that. You'll have to use JavaScript to either add a class to that element and let CSS animate it (I doubt it will work), or animate it directly with JavaScript.

I'd choose the latter.

For transitions/animations: I would use jQuery because you can delegate events to elements that may not have been created yet. You also have more control and if you add/remove elements using jQuery then you can add animation at the same time.

css:

.elementInactive {
    display:none;
} 

jquery:

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

For swapping one style with another (not an animation): I would use css' :hover property. Support for this property dates back long before CSS3, so it is a safe solution. IE has problems with using a 'div' element with :hover, so use an 'a' element with display:block to treat it like a div:

css:

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