Merge pull request #180 from motiondivision/fix/variant

fix: dynamic variant update didn't trigger update

Author: rick-hup

packages/motion/src/state/motion-state.ts

@@ -2,7 +2,7 @@ import type { MotionStateContext, Options } from '@/types'
 import { invariant } from 'hey-listen'
 import type { DOMKeyframesDefinition, VisualElement } from 'framer-motion'
 import { cancelFrame, frame, noop } from 'framer-motion/dom'
-import { isAnimateChanged, isSVGElement, resolveVariant } from '@/state/utils'
+import { isSVGElement, resolveVariant } from '@/state/utils'
 import type { Feature, StateType } from '@/features'
 import { FeatureManager } from '@/features'
 import type { PresenceContext } from '@/components/animate-presence/presence'
@@ -212,14 +212,11 @@ export class MotionState {
 
   // Update motion state with new options
   update(options: Options) {
-    const hasAnimateChange = isAnimateChanged(this.options, options)
     this.updateOptions(options)
     // Update features in parent-to-child order
     this.featureManager.update()
 
-    if (hasAnimateChange) {
-      this.startAnimation()
-    }
+    this.startAnimation()
   }
 
   // Set animation state active status and propagate to children

packages/motion/src/state/utils.ts

@@ -133,30 +133,3 @@ const svgElementSet = new Set(svgElements)
 export function isSVGElement(as: AsTag): as is SVGElements {
   return svgElementSet.has(as as SVGElements)
 }
-
-export function isAnimateChanged(oldOptions: Options, newOptions: Options): boolean {
-  const oldAnimate = oldOptions.animate
-  const newAnimate = newOptions.animate
-  if (oldAnimate === newAnimate)
-    return false
-  if (!oldAnimate || !newAnimate) {
-    return true
-  }
-
-  if (typeof oldAnimate === 'object' || typeof newAnimate === 'object') {
-    // Compare object keys and values
-    const oldKeys = Object.keys(oldAnimate)
-    const newKeys = Object.keys(newAnimate)
-
-    if (oldKeys.length !== newKeys.length)
-      return true
-    return oldKeys.some((key) => {
-      if (key === 'transition')
-        return false
-      const oldVal = oldAnimate[key]
-      const newVal = newAnimate[key]
-      return oldVal !== newVal
-    })
-  }
-  return oldAnimate !== newAnimate
-}

playground/vite/src/views/dynamic-variant.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+// Use local alias for dev, not 'motion-vue'
+import { motion } from 'motion-v'
+
+const show = ref(true)
+const toggle = () => (show.value = !show.value)
+const variants = {
+  initial: { y: 20, opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+  hidden: { y: 0, opacity: 0.25 },
+}
+</script>
+
+<template>
+  <div style="padding: 40px">
+    <button
+      data-testid="toggle-btn"
+      @click="toggle"
+    >
+      Toggle
+    </button>
+    <motion.button
+      data-testid="motion-btn"
+      initial="initial"
+      :variants="variants"
+      :while-in-view="show ? 'visible' : 'hidden'"
+      style="width: 120px; height: 40px; margin-top: 20px"
+    >
+      CLICK ME
+    </motion.button>
+  </div>
+</template>

tests/variant.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+// This test assumes the Vite dev server is running and the route is /dynamic-variant
+
+test.describe('Variant', () => {
+  test('should animate opacity when variant changes', async ({ page }) => {
+    await page.goto('/dynamic-variant')
+    const motionBtn = page.locator('[data-testid="motion-btn"]')
+    // Initial: visible
+    await expect(motionBtn).toHaveCSS('opacity', '1')
+    // Click toggle
+    await page.click('[data-testid="toggle-btn"]')
+    // After: hidden
+    await page.waitForTimeout(250)
+    await expect(motionBtn).toHaveCSS('opacity', '0.25')
+    // Click toggle again
+    await page.click('[data-testid="toggle-btn"]')
+    await page.waitForTimeout(250)
+    await expect(motionBtn).toHaveCSS('opacity', '1')
+  })
+})