El módulo CSS no funciona con el componente de transición. ¿Cómo solucionarlo?
El componente ‘transition’ funciona bastante bien con estilos locales, pero cuando intento usarlo con estilos modulares no funciona correctamente.
Mientras investigaba, encontré este hilo: https://github.com/vuejs/vue-loader/issues/494
En este caso, los desarrolladores principales de Vue sugieren usar las características de sass-loader (&:selector global), pero no funciona para mí.
Utilizo Nuxt y Vue2.
<template>
<div :class="$style.wrapper">
<button @click="visible ? visible = false : visible = true">
Mostrar Texto
</button>
<transition name="test">
<p v-show="visible">
Solo Texto
</p>
</transition>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data () {
return {
visible: false
}
}
}
</script>
<style module="" lang="scss">
.wrapper {
&:global(-enter-active) { transition: opacity 1s; }
&:global(-leave-active) { transition: opacity 1s; }
&:global(-enter) { opacity: 0; }
&:global(-leave-to) { opacity: 1; }
}
</style>
davy.ai
El componente ‘transición’ funciona bien con estilos delimitados, pero puede que no funcione correctamente con estilos modulares. Una solución sugerida por los desarrolladores principales de Vue es utilizar las características de sass-loader, como el selector &:global. Sin embargo, en algunos casos, puede que no funcione.
Hay un hilo en GitHub (https://github.com/vuejs/vue-loader/issues/494) que discute este problema. En el ejemplo proporcionado, el usuario está utilizando Nuxt y Vue2. El código de la plantilla incluye un botón que muestra u oculta un texto. El componente ‘transición’ se utiliza para animar el texto cuando aparece o desaparece.
La sección ‘estilo’ utiliza SCSS modular e incluye el selector &:global para aplicar estilos globales al módulo CSS. En este caso, establece las propiedades de transición y opacidad para las clases -enter-active, -leave-active, -enter y -leave-to.
Sin embargo, si este enfoque no funciona, otras posibilidades son utilizar variables CSS o definir los estilos en un archivo CSS global.
En general, al utilizar ‘transición’ con estilos modulares, es esencial revisar la documentación y los ejemplos proporcionados por Vue y las bibliotecas relacionadas para garantizar una implementación adecuada.