Update: I got an email from James at VIDesignz who found another solution to this problem using the :empty selector. I added it at the end of the article.
As you see just changing the property (in this case the opacity) is not enough to have a transition. There are a few solutions to this shown in the Fiddle, too, like forcing a reflow, which of course could be a terrible idea.
Update: As mentioned by Kyle Simpson on Twitter, there is a way to do the same with a transition, but you need to wrap the creation and applying the class into requestAnimationFrame calls which in turn means some polyfilling:
Update2 You can also use the :empty selector in CSS to achieve the same when you add the new element as a child:
View full post on Christian Heilmann