CSS3 Webkit-transition fade in/out

I am having a little trouble achieving a very simply fade effe开发者_如何转开发ct using CSS3. Here is my scenario:

I have a list a with some content in it. I also have some links, that when clicked filter the content in the list. What I would like is, when the page loads the list fades in, and every time the list is filtered, the list should disappear and than fade in with the new content.

I got the fade in on pageload working. However when I try to get the list to disappear and fade in again, I cant get that to work.

Here is a jsfiddle I created to demonstrate what I am trying to do. - http://jsfiddle.net/YeKX2/28/

Any help on this is appreciated.

Keeping it primarily webkit based and not using jQuery as you seem to be, you could do the following to achieve your goals:

function test(){
    document.getElementById('list').style.opacity = "0";
    setTimeout("document.getElementById('list').style.opacity = '1';",2000);
}

You'll have to play around with the timing.

Also, to note, if you want to effect the timing of the -webkit-transition, you can use the following syntax.

document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";

I highly recommend including the jQuery library if at all possible. Then fading is as easy as:

jQuery("#elementId").animate({opacity:0}); jQuery("#elementId").animate({opacity:1});

Otherwise you'll end up with browser issues as opacity is handled differently in some browsers(IE) and webkit-transition is an experimental mozilla property.