Add CSS transition support to virtual-dom.

[arianvp]

The class .transition-entering is added to a node when it is being inserted into the DOM and will be removed once it has been inserted. This enables us to trigger css transitions on node creation.

As an example I've created a slideshow app in Elm using these new changes. This example can be found here: https://github.com/arianvp/elm-gallery

Live demo: https://test.arianvp.me/

I've implemented the mechanism as discussed here: https://github.com/Matt-Esch/virtual-dom/issues/104#issuecomment-73732749

There have been some thoughts on how to do transitions on node deletion but there hasn't been a solid answer yet. It involves listening to the transitionend event on a node and setting the model to a consistent state at that point. Those are all changes that should be in the user's code and not in this library.

A really small example.

style.css

.item {
    transition: opacity 1s ease-in-out;
    opacity: 1;
}
.item.transition-entering {  opacity: 0; }

Main.elm

update : Time -> List String -> List String
update t m =  (toString t)::m

view : List String -> Html
view = div [] (List.map (\x -> div [class "item"] [text x]))

main = Signal.map view (Signal.foldp update [] (Time.every (1*Time.second)))

[Raynos]

@arianvp I would like to encourage you to also open a PR upstream againts Matt-Esch/virtual-dom

Having a standard className added on insertions by default might have a high amount of value.

If we can't do it upstream, here is a great place to do it.

[neonstalwart]

using childNodes.length is a bad inference when what you really mean is "did this node just get added to the DOM?"

it's also an inference that may possibly fail when a node is recycled. (this is a suspicion that I haven't confirmed though)

[arianvp]

I agree this is not yet ideal. Lets wait with merging this. I've encountered some small bugs in some edgecases.

[arianvp]

@neonstalwart How about http://davidwalsh.name/detect-node-insertion to detect it?