style module: remove when no prop transition happens

[wclr]

So the current version applies remove styles to the element, and wait all transitionEnd events. There is the edge case when the element (before removal) already got to the state where its style is the same with remove's value. And in this case, there will be no transition happen and the element will not be removed from DOM eventually.

It is not theoretical case I actually run into it.

I tried to solve this problem by comparing current (before removal) element actual style with remove props values. This would work in most of the cases, but there are cases where it will not, for example, if you want to set a value on transform: translateX(100px), in dom in computed styles is value will be matrix(...), so you can not directly compare string style values, the same thing for calculated css values like calc(...).

@paldepind I wonder what do you think about the issue, is it needed/worth to handle this case?

[wclr]

@mightyiam

[mightyiam]

@whitecolor perhaps a re-thinking of the mechanism. Could you please make a PR that adds a failing test for this?

[wclr]

@mightyiam

Check, please, this one without PR:

  it.only('handles remove style if no transition happens', function (done) {
    var btn = h('button', {
      style: {
        transition: 'transform 0.1s',
        remove: { transform: 'translateY(100%)' } as any
      }
    }, ['A button'])
    var vnode1 = h('div.parent', {}, [btn])
    var vnode2 = h('div.parent', {}, [null])
    document.body.appendChild(vnode0)
    patch(vnode0, vnode1)
    var button = document.querySelector('button')!
    button.style.transform = 'translateY(100%)'
    let transitionEndCalled = 0
    button.addEventListener('transitionend', function () {
      transitionEndCalled++
    })
    patch(vnode1, vnode2)
    assert.strictEqual(document.querySelector('button'), null)

    setTimeout(() => {
      assert.strictEqual(transitionEndCalled, 0, 'transitionEndCalled')
      done()
    }, 500)
  })