[BUG] Chrome browser crashes when Vue Router navigation occurs during exit animation #210
Description
1. Read the FAQs 👇
I have read the FAQs and confirmed this issue is not already documented.
2. Describe the bug
When an exit animation is playing on a motion-v component and a Vue Router navigation is triggered (e.g., via router.push()) during the animation timeline, the Chrome browser completely crashes. This appears to be a critical issue that makes the library unusable in scenarios where navigation might occur during exit animations.
Expected behavior:
The exit animation should be interrupted gracefully, or complete before the navigation occurs, without causing a browser crash.
Actual behavior:
The Chrome browser crashes completely when router.push() is called while an exit animation is in progress.
3. IMPORTANT: Provide a reproduction of the bug
Video demonstration
See attached video demonstrating the crash behavior.
Minimal reproduction steps
- Set up a Vue 3 project with Vue Router and motion-v
- Create a component with an exit animation using motion-v
- Trigger the exit animation
- While the animation is still playing, call
router.push()to navigate to another route - Observe Chrome browser crash
Code example
<script setup>
import { motion } from 'motion-v'
import { useRouter } from 'vue-router'
const router = useRouter()
// Example: triggering navigation during exit animation
const handleAction = () => {
// Exit animation starts playing
// If router.push() is called during this animation, Chrome crashes
setTimeout(() => {
router.push('/another-route')
}, 100) // Called while exit animation is still running
}
</script>
<template>
<motion.div
:initial="{ opacity: 0 }"
:animate="{ opacity: 1 }"
:exit="{ opacity: 0, transition: { duration: 0.5 } }"
>
<button @click="handleAction">Navigate</button>
</motion.div>
</template>4. System Information
- Browser: Chrome (specify version in comments below)
- OS: (specify your OS)
- motion-v version: (specify version from package.json)
- Vue version: (specify version)
- Vue Router version: (specify version)
5. Additional context
This is a critical bug that affects production applications where navigation might occur during animations. The browser crash is particularly problematic as it causes complete data loss for any unsaved work in the browser.
6. Possible related issues
- Similar timing issues might occur with other asynchronous operations during exit animations
- May be related to how motion-v handles cleanup when DOM elements are removed during animations
Video attachment: