Remove styles and element order in lists

[Christian Johansen]

I tried to use remove styles to fade out an element as it is removed from a list. I ran into some ordering issues.

Expected behavior

Initially the following is rendered on screen:

#1
#2
#3

Then, it is updated to:

#1
#2
#3
#4

And the #2 starts fading out.

Observed behavior

After the initial render, I see this on screen:

#1
#3
#4
#2

The #2 fades out, but it has effectively moved to the bottom of the list.

Sample code

The code for this example looks like this:

var el = document.getCreateElement('div');
document.body.appendChild(el);

var vnode = h('div', {},
              [h('div', {key: 'k1'}, '#1'),
               h('div', {key: 'k2',
                         style: {transition: 'opacity 2s',
                                 opacity: '1',
                                 remove: {opacity: '0'}}
                        }, '#2'),
               h('div', {key: 'k3'}, '#3')]
             );

el = patch(el, vnode);

setTimeout(function () {
  patch(el, h('div', {},
              [h('div', {key: 'k1'}, '#1'),
               h('div', {key: 'k3'}, '#3'),
               h('div', {key: 'k4'}, '#4')]
             ))
}, 3000);

Is there anything I can do to help Snabbdom maintain the order of the elements?