Creé un componente personalizado que me permite aplicar una transición de desvanecimiento sin tener que escribir siempre el componente <transition> :
<transition mode="out-in" enter-active-class="transition-opacity ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-active-class="transition-opacity ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0" > <slot /> </transition>Pero cuando lo uso en algún lugar como:
<FadingTransition> <div v-show="!isSearchFocused"> ... </div> </FadingTransition>Obtuve el siguiente error:
[Vue warn]: Hydration node mismatch: - Client vnode: div - Server rendered DOM: <!--[--> (start of fragment) at <BaseTransition mode="out-in" appear=false persisted=false ... > at <Transition mode="out-in" enter-active-class="transition-opacity ease-out duration-75" enter-from-class="opacity-0" ... > at <FadingTransition> at <BaseTransition mode="out-in" appear=false persisted=false ... > at <Transition mode="out-in" enter-active-class="ease-out duration-75" enter-from-class="transform -translate-y-1 opacity-0" ... > at <SearchBar> at <Header> at <App> Hydration completed but contains mismatches.¿Cómo puedo arreglarlo?
No puedo decirlo con certeza, pero podría ser un problema usarlo dentro de su propio componente. Puede intentar usar <transition name="fadingtransition"> y luego almacenar los estilos de transición en un archivo CSS separado.