fix(useAnimate): respect immediate: false with conditionally rendered elements (#4947)

curtgrimes · web-flow · commit 90c7f5b9d91c · 2025-08-12T01:49:30.000Z
diff --git a/packages/core/useAnimate/index.browser.test.ts b/packages/core/useAnimate/index.browser.test.ts
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { useAnimate } from '@vueuse/core'
 import { describe, expect, it, vi } from 'vitest'
 import { defineComponent, shallowRef } from 'vue'
@@ -73,4 +73,34 @@ describe('useAnimate', () => {
 
     wrapper.unmount()
   })
+
+  it('should not automatically start the animation when shown if `immediate` is false', async () => {
+    const wrapper = mount(defineComponent({
+      template: '<p v-if="show" ref="el">test</p>',
+      setup() {
+        const show = shallowRef(false)
+        const el = shallowRef<HTMLElement>()
+        const animate = useAnimate(el, { transform: 'rotate(360deg)' }, {
+          duration: 100,
+          immediate: false,
+        })
+
+        return { ...animate, el, show }
+      },
+    }))
+
+    const vm = wrapper.vm
+
+    // It is initially hidden
+    expect(vm.animate).toBeUndefined()
+
+    // Toggle element into view
+    vm.show = true
+    await flushPromises()
+
+    // It should not have started automatically
+    expect(vm.animate?.playState).toBe('paused')
+
+    wrapper.unmount()
+  })
 })
diff --git a/packages/core/useAnimate/index.ts b/packages/core/useAnimate/index.ts
@@ -225,7 +225,7 @@ export function useAnimate(
 
   watch(() => unrefElement(target), (el) => {
     if (el) {
-      update()
+      update(true)
     }
     else {
       animate.value = undefined

Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ export function useAnimate(`
`225`	`225`
`226`	`226`	`watch(() => unrefElement(target), (el) => {`
`227`	`227`	`if (el) {`
`228`		`- update()`
	`228`	`+ update(true)`
`229`	`229`	`}`
`230`	`230`	`else {`
`231`	`231`	`animate.value = undefined`