Apply enter and enterFrom classes in SSR for Transition compone…

…nt (#2059)

* apply `enter` and `enterFrom` classes in SSR

This only happens on the server when `show=true` and `appear=true`. This
will guarantee that the `class` is already set to the correct value
before the transition happens.

It worked before if you moved your classes from `enterFrom` to
`className` because that prop was SSR'd.

* update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `shift+home` and `shift+end` works as expected in the `Combobox.Input` component ([#2024](https://github.com/tailwindlabs/headlessui/pull/2024))
 - Improve syncing of the `Combobox.Input` value ([#2042](https://github.com/tailwindlabs/headlessui/pull/2042))
 - Fix crash when using `multiple` mode without `value` prop (uncontrolled) for `Listbox` and `Combobox` components ([#2058](https://github.com/tailwindlabs/headlessui/pull/2058))
+- Apply `enter` and `enterFrom` classes in SSR for `Transition` component ([#2059](https://github.com/tailwindlabs/headlessui/pull/2059))
 
 ## [1.7.4] - 2022-11-03
 

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -30,6 +30,7 @@ import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useTransition } from '../../hooks/use-transition'
 import { useEvent } from '../../hooks/use-event'
 import { useDisposables } from '../../hooks/use-disposables'
+import { classNames } from '../../utils/class-names'
 
 type ContainerElement = MutableRefObject<HTMLElement | null>
 
@@ -412,6 +413,15 @@ let TransitionChild = forwardRefWithAs(function TransitionChild<
   let theirProps = rest
   let ourProps = { ref: transitionRef }
 
+  let isServer = typeof window === 'undefined' || typeof document === 'undefined'
+  if (appear && show && isServer) {
+    theirProps = {
+      ...theirProps,
+      // Already apply the `enter` and `enterFrom` on the server if required
+      className: classNames(rest.className, ...classes.current.enter, ...classes.current.enterFrom),
+    }
+  }
+
   return (
     <NestingContext.Provider value={nesting}>
       <OpenClosedProvider