Modal fade animation gets interrupted by .btn transition

[omermecitoglu]

There is no problem when you click on the close button (X) or backdrop. But this is happening when you click on a button in the footer. Just click fast enough to see the difference on the fade animation.

https://react-bootstrap.github.io/components/modal/#modals-live

I think it's caused by transition event in bootstrap's .btn class, as @bbtfr mentioned here.

.btn {
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[taion]

@jquense should we override/replace addEndListener in the modal transitions? seems like they pick up on transitions on child nodes of the modal itself, which leads to this glitch

[uuykay]

A hacky solution, but I have found that if you add a small timeout, (smallest being 200 milliseconds) you can see the closing animation.

Note I am using Redux in this example, but you can just as easily use useState and the function that sets the boolean.

      <Button
        onClick={() => {
          setTimeout(function() {
            dispatch(toggleUIModal("hide"))
          }, 200)
        }}
      >
        Try answering again
      </Button>

[kyletsang]

I guess we could use something like this @taion ? In my testing, I get about 5 transitionend events from the button before getting 1 from the modal.

function elementTransitionEnd(node, done) {
  const remove = listen(node, 'transitionend', (e) => {
    if (e.target === node) {
      remove();
      done();
    }
  });
}

[taion]

It seems reasonable in this case; I think there are other cases where the transition may not be on the element itself. Could we make an upstream fix in dom-helpers? cc @jquense – would this be correct?

[kyletsang]

Yeah I think a fix in dom-helpers is the best place for it. Could add an option like exactElement: boolean or something to transitionEnd

[MSchiavi]

Not sure if this is still ongoing but this problem also occurs with Toasts as well.