Slide transitions leads to empty slides

[Giuseppe499]

Describe the bug
When slide transitions, such as

---
transition: slide-left
---

are enabled, an issue arises while scrolling through the presentation. If I navigate too quickly forward and backward through slides, the slides become empty. Unfortunately, these empty slides do not reset even if I change to another slide, resulting in a broken presentation.

The broken transitions are:

• slide-left
• slide-right
• slide-up
• slide-down

I tested it in Firefox and Chromium.

These transitions seem to work:

• fade
• fade-out

To Reproduce
Steps to reproduce the behavior:

1. Enable slide transitions using the following configuration:

---
transition: slide-left
---

2. Change slides quickly by going forward and backward without waiting animations to complete.
3. Eventually you will get empty slides
4. Attempt to reset the empty slides by changing to another slide.
5. The slide should still be empty

Desktop:

• OS: Kubuntu 22.04
• Browser: Firefox 122.0 (64-bit)
• Slidev version: v0.47.4

[pleonr]

Same error, But I didn't use transition: slide-left

I've just installed trough npm, and in the sample slide show, if you use the arrow keys to advance a few slides and go back a few times, eventually you will get empty slides.

[jgosmann]

Also encountering the same problem. I tried multiple Slidev versions down to 0.43.0 and all were affected even though I believe the problem started to appear much more recently.

[jgosmann]

I think I was able to figure out where the bug was introduced. With vue@3.4.15 everything seems to work fine, once I update to vue@3.4.16 the bug starts appearing (changelog).

[KermanX]

It seems that this has been (finally) fixed by vuejs/core#10297 (vue@3.4.18).

Updating Slidev to the latest version or just updating Vue can fix this.

[jgosmann]

For me it is still broken in vue@3.4.18, but in vue@3.4.19 it seems to be fixed.