keep the to classes for a smoother transition

In the next transition we will remove _all_ classes provided and re-add the once we need.
tailwindlabs · Apr 12, 2022 · 265acfa · 265acfa
1 parent f65890b
commit 265acfa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/packages/@headlessui-react/src/components/transitions/transition.test.tsx b/packages/@headlessui-react/src/components/transitions/transition.test.tsx
@@ -474,7 +474,7 @@ describe('Transitions', () => {
 
         Render 3: Transition took at least 50ms (yes)
             -  class=\\"enter to\\"
-            +  class=\\"\\""
+            +  class=\\"to\\""
       `)
     })
 
@@ -525,7 +525,7 @@ describe('Transitions', () => {
 
         Render 3: Transition took at least 50ms (yes)
             -  class=\\"enter to\\"
-            +  class=\\"\\""
+            +  class=\\"to\\""
       `)
     })
 
@@ -573,7 +573,7 @@ describe('Transitions', () => {
 
         Render 3: Transition took at least 50ms (yes)
             -  class=\\"enter to\\"
-            +  class=\\"\\""
+            +  class=\\"to\\""
       `)
     })
 
@@ -622,7 +622,7 @@ describe('Transitions', () => {
 
         Render 3: Transition took at least 50ms (yes)
             -  class=\\"enter to\\"
-            +  class=\\"\\""
+            +  class=\\"to\\""
       `)
     })
 
@@ -724,7 +724,7 @@ describe('Transitions', () => {
 
           Render 3: Transition took at least 50ms (yes)
               -  class=\\"leave to\\"
-              +  class=\\"\\"
+              +  class=\\"to\\"
               +  hidden=\\"\\"
               +  style=\\"display: none;\\""
         `)
@@ -794,10 +794,10 @@ describe('Transitions', () => {
 
           Render 3: Transition took at least 50ms (yes)
               -  class=\\"enter enter-to\\"
-              +  class=\\"\\"
+              +  class=\\"enter-to\\"
 
           Render 4:
-              -  class=\\"\\"
+              -  class=\\"enter-to\\"
               +  class=\\"leave leave-from\\"
 
           Render 5:
@@ -883,10 +883,10 @@ describe('Transitions', () => {
 
           Render 3: Transition took at least 50ms (yes)
               -  class=\\"enter enter-to\\"
-              +  class=\\"\\"
+              +  class=\\"enter-to\\"
 
           Render 4:
-              -  class=\\"\\"
+              -  class=\\"enter-to\\"
               +  class=\\"leave leave-from\\"
 
           Render 5:
@@ -896,12 +896,12 @@ describe('Transitions', () => {
           Render 6: Transition took at least 75ms (yes)
               -  class=\\"leave leave-to\\"
               -  style=\\"\\"
-              +  class=\\"\\"
+              +  class=\\"leave-to\\"
               +  hidden=\\"\\"
               +  style=\\"display: none;\\"
 
           Render 7:
-              -  class=\\"\\"
+              -  class=\\"leave-to\\"
               -  hidden=\\"\\"
               -  style=\\"display: none;\\"
               +  class=\\"enter enter-from\\"
@@ -913,7 +913,7 @@ describe('Transitions', () => {
 
           Render 9: Transition took at least 75ms (yes)
               -  class=\\"enter enter-to\\"
-              +  class=\\"\\""
+              +  class=\\"enter-to\\""
         `)
       })
     )
@@ -1174,10 +1174,10 @@ describe('Events', () => {
 
         Render 3: Transition took at least 50ms (yes)
             -  class=\\"enter enter-to\\"
-            +  class=\\"\\"
+            +  class=\\"enter-to\\"
 
         Render 4:
-            -  class=\\"\\"
+            -  class=\\"enter-to\\"
             +  class=\\"leave leave-from\\"
 
         Render 5:

diff --git a/packages/@headlessui-react/src/components/transitions/utils/transition.ts b/packages/@headlessui-react/src/components/transitions/utils/transition.ts
@@ -146,7 +146,7 @@ export function transition(
 
     waitForTransition(node, (reason) => {
       if (reason === Reason.Ended) {
-        removeClasses(node, ...base, ...to)
+        removeClasses(node, ...base)
         addClasses(node, ...classes.entered)
       }