Oddity with JS transition hooks used in combination with CSS

[alexdilley]

Version

2.5.17

Reproduction link

https://codesandbox.io/s/6x4k5vrrkn

Steps to reproduce

Remove the [unused] done parameter from the leave callback signature in SideSheet.vue.

What is expected?

The component to transition both on enter and leave.

What is actually happening?

The component enters immediately (without transitioning).

---

The done callback shouldn't be needed if the transition duration is implicit in CSS (as noted in the docs). However, by retaining the done parameter in the function signature it is unclear why it should "work" (since it's unused within the function definition itself).

[posva]

This is the same as #8279 but it is unclear to me why the CSS transition isn't triggering.
However, your transition seems to be using the leave while it should be using the enter (try changing durations

[alexdilley]

Thanks for pointing me at the other issue, @posva; apologies for not finding that.

You're right, it should be the enter transition/cb that should be the concern. It was by fluke that I discovered that an unused done arg (which as @yyx990803 points out is the cue that the userWantsControl) provided a "solution", so suspected it had relevance.

After stepping through the code, I noticed the nextFrame trick (defined in the transition util file and utilised in the transition module) which nests a requestAnimationFrame call to remove the beforeEnter transition class, so wondered if it was a timing issue (since that happens asynchronously to any user defined enter callback). And that leads to an alternative, more appropriate solution:

beforeEnter(el) {
  el.style.marginLeft = `-${this.width}px`;
},

enter(el) {
  window.requestAnimationFrame(() =>
    window.requestAnimationFrame(() => {
      el.style.marginLeft = null;
    })
  );
},

leave(el) {
  el.style.marginLeft = `-${this.width}px`;
},

But the code is brittle since it's arguably reliant on what's happening internally.

Does it suggest that the user defined hooks should actually run within that nextFrame cb? 🤷‍♂️ Else the DOM change in the beforeEnter hook appears not to actually [re]paint, hence why a transition never occurs.

(Area in code of relevance, here.)