Transiciones CSS en Vuejs y Nuxtjs

 

 

 

  • Clase magistral de tipografía, con Elliot Jay Stocks
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. ¿Qué es una transición? #
    2. ¿Qué es una transición CSS? #
      1. transition-property#
      2. transition-duration#
      3. transition-timing-function#
      4. transition-delay#
    3. Propiedad taquigráfica #
    4. Transiciones en Vue.js #
      1. Transición de elementos y componentes individuales #
      2. v-enter#
      3. v-enter-active#
      4. v-leave-active#
      5. v-leave-to#
    5. Lista de transiciones #
    6. Transiciones en Nuxt.js: #
      1. Agréguelo al componente de página individual #
      2. pageTransition#

    Las transiciones son una buena manera de eliminar, cambiar o actualizar datos en una aplicación porque su aparición agrega un efecto agradable y es buena para la experiencia del usuario. En este tutorial, veremos las diferentes formas de aplicar transiciones en aplicaciones Vue.js y Nuxt.js.

     

    Las transiciones son un módulo de CSS que le permite crear transiciones graduales entre los valores de propiedades CSS específicas. El comportamiento de estas transiciones se puede controlar especificando su función de sincronización, duración y otros atributos. El uso de estas transiciones en sus aplicaciones y sitios web crea una mejor experiencia visual y, a veces, atrae y mantiene la atención del usuario mientras se introduce o sale de la pantalla una información. Según Can I Use , las transiciones son compatibles con la mayoría de los navegadores, aunque existen algunos problemas menores con Internet Explorer y Safari.

     

    Fuente: caniuse.com . ( Vista previa grande )

    Vue.js es un marco de JavaScript de código abierto para crear aplicaciones web orientadas al cliente y aplicaciones de una sola página (SPA). Una de las características de este marco es la capacidad de agregar transiciones a una aplicación sin problemas, para cambiar entre páginas o componentes, y veremos cómo hacerlo en este tutorial.

    Nuxt.js también es un marco de JavaScript, creado sobre Vue.js (y a menudo denominado marco de un marco), para crear aplicaciones web del lado del servidor, sitios web generados estáticamente y SPA. Funciona igual que Vue.js, por lo que si conoce Vue.js, no debería tener muchos problemas para comenzar con Nuxt.js. Nuxt.js viene con dos propiedades para agregar transiciones a una aplicación, y las cubriremos también en este tutorial.

    Este tutorial requiere conocimientos básicos de Vue.js o Nuxt.js. Todos los fragmentos de código de este tutorial se pueden encontrar en GitHub .

    ¿Qué es una transición? #

    Según el Diccionario Oxford , una transición se puede definir como:

    “Un pasaje de un escrito que conecta suavemente dos temas o secciones entre sí.

    El proceso o período de cambio de un estado o condición a otro”.

    En términos de física, una transición se define así:

    “Un cambio de un átomo, núcleo, electrón, etc. de un estado cuántico a otro, con emisión o absorción de radiación”.

    A partir de estas definiciones, nos hacemos una idea de qué es una transición. Todas las definiciones implican dos cosas o estados diferentes. En términos de código, una transición no es tan diferente.

    ¿Qué es una transición CSS? #

    Según la documentación web de Mozilla :

    “CSS Transitions es un módulo de CSS que te permite crear transiciones graduales entre los valores de propiedades CSS específicas. El comportamiento de estas transiciones se puede controlar especificando su función de sincronización, duración y otros atributos”.

    Esto significa que podemos definir una transición CSS como: el cambio en la propiedad CSS de uno o más elementos de un valor a otro.

    La transitionpropiedad CSS nos permite agregar un efecto de transición a cualquier elemento válido. Consta de hasta otras cuatro propiedades (cinco, si contamos la transitionpropiedad en sí) que pueden usarse individualmente o combinadas a modo de taquigrafía. Cada propiedad tiene una función diferente.

    transition-property#

    Acepta transition-propertyel nombre de la propiedad CSS en la que queremos estar atentos a los cambios y cuyo proceso de cambio queremos realizar la transición. Se parece a esto:

     

    .btn { width: 200px; height: 50px; transition-property: width; background-color: red; color: #fff; border: 0;}

    Pero esta propiedad no hace nada sin la siguiente propiedad.

    transition-duration#

    La propiedad especifica el tiempo que debe durar transition-durationel cambio de los elementos en . transition-propertyEsta propiedad es necesaria para que la transición funcione. Si no está configurado (con un valor mayor que 0s), entonces el valor predeterminado 0ssignificaría que no se ejecutará. Entonces, establezcamos una duración para esta transición:

    .btn { width: 200px; transition-property: width; transition-duration: 2s; background-color: red; color: #fff; border: 0;}

    Aquí tenemos un elemento con un nombre de clase btnque tiene un ancho de 200px. Estamos usando las propiedades transition-propertyy transition-durationaquí. Lo que esto significa es: "Oye, CSS, ten cuidado cuando la widthpropiedad cambia y, cuando esto suceda, deja que el efecto 2scambie".

    Entonces, si tenemos un botón con un nombre de clase btn, entonces el index.htmlarchivo se vería así:

    !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleCSS Transitions/title link rel="stylesheet" href="./assets/styles.css"/headbody Section h1Hi CSS Transitions/h1 button class="push_button red"Hover on me to see a cool transition/button /Section/body/html

    Aquí, tenemos un archivo HTML que contiene un botón con una clase que tiene transition-propertypropiedades transition-durationque vigilan los cambios en el ancho del elemento.

    Una cosa a tener en cuenta es que, para que la transición en nuestro botón funcione, tenemos que cambiar el ancho de ese elemento, ya sea ajustando manualmente el ancho con las herramientas de desarrollo en el navegador, usando uno de los pseudo CSS -classes o mediante JavaScript. Para los fines de este tutorial, usaremos la pseudoclase CSS :hoverpara cambiar el ancho del botón:

    // existing styles.btn:hover { width: 300px;}

    Ahora, si pasamos el cursor sobre este botón, deberíamos ver que el ancho del botón aumenta gradualmente durante el tiempo establecido, que es 2s.

    transition-timing-function#

    La transition-timing-functionpropiedad determina la velocidad a la que se produce el efecto de transición. Hay cinco valores disponibles para esta propiedad:

    • ease
      Esto (el valor predeterminado) especifica un efecto de transición que comienza lentamente, luego se vuelve rápido y luego termina lentamente.
    • linear
      Esto especifica un efecto de transición con la misma velocidad de principio a fin.
    • ease-in
      Esto especifica un efecto de transición con un inicio lento.
    • ease-out
      Esto especifica un efecto de transición con un final lento.
    • ease-in-out
      Esto especifica un efecto de transición con un inicio y un final lentos.
    • cubic-bezier(n,n,n,n)
      Esto le permite definir sus propios valores en una función de Bézier cúbico.

    Entonces, si agregamos ease-ina nuestro botón, deberíamos notar la velocidad a la que cambian widthy height, en comparación con la velocidad a la que el botón vuelve a su estado normal. Aquí está nuestra styles.csshoja actualizada :

     

    .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: ease-in; background-color: red; color: #fff; border: 0;}

    Si queremos un efecto de velocidad más dramático o la libertad de establecer un efecto de velocidad específico, podemos usar cubic-bezier(n,n,n,n):

    btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); background-color: red; color: #fff; border: 0;}

    Una cosa interesante acerca de este valor es que puedes editarlo directamente en el navegador usando las herramientas de desarrollador.

    Bézier cúbico en las herramientas de desarrollo del navegador. ( Vista previa grande )

    Si hace clic en la parte resaltada de sus herramientas de desarrollador, obtendrá una interfaz para modificar las cubic-bezieropciones:

    Interfaz de Bézier cúbico resaltada en amarillo. ( Vista previa grande )

    A medida que mueves los dos puntos, los valores de (n,n,n,n)cambian y verás una representación (resaltada en rojo) de cómo aparecerá el efecto de velocidad. Esto puede resultar muy útil cuando tienes en mente un efecto de velocidad específico.

    transition-delay#

    La transition-delaypropiedad establece cuánto tiempo (en segundos) debe esperar la transición antes de que comience a producirse su efecto. Este tiempo es diferente de la transition-durationpropiedad, que especifica cuánto tiempo tendrá lugar el efecto de transición.

    .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 5s; background-color: red; color: #fff; border: 0;}

    Si intenta esto en el navegador, notará un retraso antes de que el elemento widthcomience a cambiar. Esto se debe a la transition-delaypropiedad y el valor que hemos establecido.

    Propiedad taquigráfica #

    Las propiedades de transición individuales pueden resultar tediosas de utilizar. Por esta razón tenemos la propiedad abreviada: transition. Acepta todas las propiedades en un orden definido:

    { transition: a b c d;}

    Aquí, las letras se corresponden de la siguiente manera:

    • a:transition-property
    • b:transition-duration
    • C:transition-timing-function
    • d:transition-delay

    Podemos refactorizar nuestra transición existente al trabajo usando esta propiedad abreviada:

     

    // from.btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 1s; background-color: red; color: #fff; border: 0;}// to.btn { width: 200px; height: 50px; transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; background-color: red; color: #fff; border: 0;}

    Si probamos este código en el navegador, obtendremos el mismo efecto de transición que obtuvimos cuando usamos las propiedades individuales.

    Transiciones en Vue.js #

    Vue.js viene con dos formas diferentes de agregar transiciones a una aplicación. Esto no significa que no podamos usar transiciones al estilo CSS. Simplemente significa que los desarrolladores de Vue.js se han basado en CSS para facilitar el uso de las transiciones. Veámoslos uno por uno.

    Transición de elementos y componentes individuales #

    Una forma en que podemos usar transiciones en Vue.js es envolviendo el transitioncomponente alrededor de un elemento o componente, usando cualquiera de los siguientes:

    • representación condicional (usando v-if),
    • visualización condicional (usando v-show),
    • componentes dinámicos,
    • nodos raíz del componente.

    Cuando desarrollamos una aplicación, hay casos en los que queremos mostrar datos al usuario dependiendo de un valor (como un booleano). Aquí hay un ejemplo de cómo funciona esto, tomado del index.vuearchivo:

    template div p v-if="show"Now you see me!/p p v-elseNow you don't!/p button @click="show = !show"click me/button /div/templatescriptexport default { data() { return { show: true } }}/scriptstyle/style

    Hemos agregado dos párrafos a esta página que aparecen dependiendo del valor de show. También tenemos un botón que cambia el valor showal hacer clic. Agregaremos esta página a nuestro App.vuearchivo importándola así:

    template div id="app" Index / /div/templatescriptimport Index from "./components/index.vue";export default { name: 'App', components: { Index }}/script

    Si abrimos el navegador, deberíamos ver nuestro párrafo y botón:

    Página de inicio de Vue.js en estado predeterminado. ( Vista previa grande )

    En este momento, al hacer clic en el botón solo se cambia el valor de show, lo que hace que el texto visible cambie:

    Página de destino cuando se hace clic en el botón. ( Vista previa grande )

    Se puede agregar una transición a este párrafo envolviendo ambos párrafos en el transitioncomponente. Este componente acepta un nameaccesorio, que es muy importante para la transición al trabajo.

    template div transition name="fade" p v-if="show"Now you see me!/p p v-elseNow you don't!/p /transition button @click="show = !show"click me/button /div/template

    Este nombre le dice a Vue.js qué transición aplicar a los elementos o componentes dentro de este transitioncomponente. En este punto, si hacemos clic en el botón, todavía no notaremos ninguna transición porque todavía tenemos que agregar la configuración para nuestra transición en forma de clases CSS. Știri de ultimă oră din Spania

     

    Una cosa a tener en cuenta es que, cuando utilizamos una transición entre dos elementos de la misma etiqueta, debemos especificar un atributo clave en cada elemento para que se produzca la transición.

    template div transition name="fade" p v-if="show" key="visible"Now you see me!/p p v-else key="notVisible"Now you don't!/p /transition button @click="show = !show"click me/button /div/template

    Vue.js has six transition classes that are applied to the elements or components inside the transition component, and each of these classes represents a state in the transition process. We’re going to look at only a few of them.

    v-enter#

    The v-enter class represents the “starting state for enter”. This is the point at which a condition (v-if or v-else) has been met and the element is about to be made visible. At this point, the class has been added to the element, and it is removed once the element has been added. The name prop (in this case, fade) attached to the transition component is prefixed to this class name, but without the v. This v can be used by default if name is not provided. Thus, we can add this class to our index.vue file:

    stylep { color: green;}.fade-enter{ color: red; transform: translateY(20px);}/style

    First, we add a color of green to all of the paragraphs on the page. Then, we add our first transition class, fade-name. Inside this class, we change the color to red, and we make use of the transform and translateY property to move the paragraph by 20px along the y-axis (vertically). If we try clicking on the button again, we will notice that very little or no transition takes place during the switch because we need to add this next class we’ll look at.

    v-enter-active#

    The v-enter-active class represents the “whole entering” state of a transitioning element. It means that this class is added just before the element is inserted or becomes visible, and it is removed when the transition has ended. This class is important for v-enter to work because it can be used to add the CSS transition property to the class, together with its properties (transition-property, transition-duration, transition-timing-function, and transition-delay), some of which are needed in order for the transition effect to work. Let’s add this class to our app and see what happens:

    .fade-enter-active { transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);}

    Now, if we click on the button, we will notice the transition of the color and the position of each of the texts as they come into view. But the transition from visible to hidden isn’t smooth enough because no transition is happening.

    v-leave-active#

    The v-leave-active class represents the entire state in which an element changes from visible to hidden. This means that this class is applied from the moment an element starts to leave the page, and it is removed once the transition ends. This class is important in order for a leave transition to be applied because it takes in the CSS transition property, which also takes in other transition properties. Let’s add this to our app and see what happens:

     

    .fade-leave-active { transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);}

    When we click on the button now, we will notice that the element that should leave waits for approximately 2 seconds before disappearing. This is because Vue.js is expecting the next class with this transition to be added in order for it to take effect.

    v-leave-to#

    The v-leave-to transition represents the “leaving” state, meaning the point at which an element starts to leave and its transition is triggered. It is added one frame after a leaving transition is triggered, and removed when the transition or animation finishes. Let’s add this class to our app and see what happens:

    .fade-leave-to { transform: translateX(100px); color: cyan;}

    Clicking on the button, we will notice that each element that is leaving is sliding to the right as the color changes.

    Now that we understand how transitions work in Vue.js, here’s an image that brings it all together:

    Classification of Vue.js transition classes. (Large preview)

    Finally, notice the not-so-smooth transition that occurs during the enter and leave states of elements that are transitioning. This is because Vue.js’ transitions occur simultaneously. Vue.js has a mode prop that helps us achieve a very smooth transition process. This prop accepts one of the following values:

    • in-out
      The new element transitions in first, and then, when it’s complete, the current element transitions out.
    • out-in
      The current element transitions out first, and then, when complete, the new element transitions in.

    If we add this mode to our index.vue file and try again, we should see a better transition:

    template div transition name="fade" appear mode="out-in" p v-if="show" key="visible"Now you see me!/p p v-else key="notVisible"Now you don't!/p /transition button @click="transitionMe"click me/button /div/template

    Now, if we click on the button, we will notice that one element leaves before another enters. This is a result of the mode we have selected for this transition. If we try the other mode, we will get a different behavior.

    Lista de transiciones #

    If you ever try adding transitions to more than one element at a time using the transition component, an error will get printed to the console:

    Vue.js error printed in console. (Large preview)

    This is because the transition component is not meant to render more than one element at a time. If we want to transition two or more elements at a time or render a list (using v-for), we make use of the transition-group component. This component also accepts a name prop, but it has some differences from the transition component, including the following:

     

    • A key attribute is required for each element inside this component.
    • There is no need for the mode prop because more than one element would be rendered at a time.
    • A span element is rendered by default, but it can be modified by specifying a tag prop when defining the transition-group component. Let’s look at an example (in our listTransition.vue file):
     template div h1List/Group Transition/h1 ul li v-for="user in users" :key="user.id" {{user.name}} buttonRemove/button /li /ul /div/templatescriptexport default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; }};/scriptstyle/style

    Here, we have an array of users, which we loop through using v-for, displaying the name in our template section. In order to be able to view this list, we need to import this component into the App.vue page:

    template div id="app" Index / listTransition / /div/templatescriptimport Index from "./components/index.vue";import listTransition from "./components/listTransition.vue";export default { name: "App", components: { Index, listTransition }};/script

    Note that when using the transition-group component, instead of wrapping our list with a ul tag (or any tag we have in mind), we wrap it around the transition-group component and add the tag to the tag prop, like this:

    template div h1List/Group Transition/h1 transition-group name="slide-fade" tag='ul' li v-for="user in users" :key="user.id" {{user.name}} buttonRemove/button /li /transition-group /div/templatescriptexport default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; }};/scriptstyle.slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1);}.slide-fade-enter { color: mediumblue; transform: translateY(20px);}.slide-fade-leave-to { transform: translateX(100px); color: cyan;}/style

    Here, we have replaced the ul tag with the transition-group component, and added the ul as the tag prop value. If we inspect the updated page in the developer tools, we will see that the list is being wrapped in the element that we specified in the tag prop (that is, ul).

    The ul tag highlighted in the developer tools. (Large preview)

    We have also added a transition name prop with a value of slide-fade to this component, with style rules below in the style section that follow this naming convention. For this to work, we need to add the following lines of code to our file:

     

    template div h1List/Group Transition/h1 transition-group name="slide-fade" tag="ul" li v-for="user in users" :key="user.id" {{user.name}} button @click="removeUser(user.id)"Remove/button /li /transition-group /div/templatescriptexport default { // ... methods: { removeUser(id) { let users = this.users.filter(user = user.id !== id); this.users = users; } }};/script 

    In the template section, we add a click event to each button in the loop and pass the user.id to the removeUser method attached to this click event. We then create this function in the script section of our file. This function accepts an id as argument. Then, we run through our existing users and filter out the user with the id passed into this function. When this is done, we save our new array of users to the data of our page.

    At this point, if you click on any of the buttons for the users, a transition effect will be applied as the user is being removed from the list.

    Transiciones en Nuxt.js: #

    Adding transitions to a Nuxt.js application is quite different from how you might be used to in Vue.js. In Nuxt.js, the transition component is automatically added to the application for you. All you need to do is one of the following.

    Agréguelo al componente de página individual #

    Nuxt.js allows us to add transitions to an individual page component seamlessly. This transition is applied while the user is navigating to this page. All we have to do is add a transition property to the script section of the component. This property can be a string, a function, or an object. Some of the properties it accepts are:

    • name,
    • mode,
    • css.

    Like Vue.js, Nuxt.js has a default name that gets assigned to a transition class if no name is provided, and it is called page. Let’s see how this works when we add it to our application in transition.vue:

    template div p Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero odio, asperiores debitis harum ipsa neque cum nulla incidunt explicabo ut eaque placeat qui, quis voluptas. Aut necessitatibus aliquam veritatis. /p nuxt-link to="/"home/nuxt-link /div/templatescriptexport default { transition: { name: "fade", mode: "out-in" }, data() { return { show: true }; }};/scriptstylep { color: green;}.fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1);}.fade-enter { color: mediumblue; transform: translateY(20px);}.fade-leave-to { transform: translateX(100px); color: cyan;}/style

    On this page, we’ve displayed “lorem ipsum” in the template section. We’ve also added the transition property, to which we have passed an object whose name is set to fade and whose mode is set to out-in. Finally, in the style section, we’ve added some styles that control the transition as the user navigates between this page and another.

    In order for this transition to work, we have to navigate to /transition, but we would not notice any transition if we manually enter this route in our browser. So, let’s add a link to this page on the index.vue page.

    template div class="container" div // .. nuxt-link to="/transition"next page/nuxt-link /div /div/template

    Now, if we click the link on either of the two pages, we will notice a sliding transition as the browser moves to and from the /transition route.

    pageTransition#

    Adding transitions to individual pages can be challenging if we want to add them to all of the pages in the application. That’s where pageTransition comes in. This property allows us to add a general configuration for all of our pages in the nuxt.config.js file. This property accepts both a string and object as an option. Let’s see how that works in nuxt.config.js:

    export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], pageTransition: { name: "fade", mode: "out-in" },}

    Here, we’ve added the link to a CSS file, which we’ll create shortly. We have also added the pageTransition property to the file, along with with its configuration. Now, let’s create our CSS file, transition.css, and add the following styles to it:

    .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1);}.fade-leave-active { transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1);}.fade-enter { color: mediumblue; transform: translateY(20px);}.fade-leave-to { transform: translate3d(-500px, -300px 400px); color: cyan;}

    We’ve added the classes and styles that will be applied to the transition between one route and the other. If we get rid of the transition configuration from the transition.vue page and try to navigate between the two pages, we will get a transition effect.

    layoutTransiti




    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Transiciones CSS en Vuejs y Nuxtjs

    Transiciones CSS en Vuejs y Nuxtjs

    Clase magistral de tipografía, con Elliot Jay Stocks Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-transiciones-css-en-vuejs-y-nuxtjs-1045-0.jpg

    2024-05-21

     

    Transiciones CSS en Vuejs y Nuxtjs
    Transiciones CSS en Vuejs y Nuxtjs

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20