view-transition affects also global layers

[albertomercurio]

Describe the bug

I have implemented a simple progress bar as a global layer. This bar changes length depending on the relative slide position. I have defined some animations and easing to make the progress bar fancier.

However, when. use the view-transition, the progress bar animation disappears, and I only see a simple fade-out between the start and final states of the progress bar.

I think that view-transition should only affect the slide contents and not global layers.

Minimal reproduction

Steps to reproduce the behavior:

Write the following content on the global-top.vue file

<template view-transition-name: none>
  <div class="absolute bottom-0 left-0 h-1 bg-red transition-all duration-700 ease-in-out"
       :style="{ width: ($nav.currentPage - 1) / ($nav.total - 1) * 100 + '%' }"></div>
</template>

<script setup>

</script>

And use the view-transition of course.

Environment

• Slidev version: 51.8.1
• Browser: Safari 18.5
• OS: Mac OS Sequoia