From 2170716ad4cb084c09b99863f0f8c1d6170ade2d Mon Sep 17 00:00:00 2001 From: Waxer59 Date: Fri, 25 Aug 2023 20:32:38 +0200 Subject: [PATCH 1/6] update page --- .../docs/es/guides/view-transitions.mdx | 228 ++++++++++++++---- src/i18n/es/nav.ts | 2 +- 2 files changed, 181 insertions(+), 49 deletions(-) diff --git a/src/content/docs/es/guides/view-transitions.mdx b/src/content/docs/es/guides/view-transitions.mdx index 52699d41b69a1..70cc6b53c7310 100644 --- a/src/content/docs/es/guides/view-transitions.mdx +++ b/src/content/docs/es/guides/view-transitions.mdx @@ -1,51 +1,54 @@ --- -title: View Transitions (Experimental) +title: View Transitions description: >- - Cómo habilitar el soporte experimental para las view transitions en tu sitio de Astro + Habilita una navegación fluida entre páginas en Astro con las view transitions. i18nReady: true --- import Since from '~/components/Since.astro' -El soporte para **transiciones de vista opcionales por página** en proyectos Astro puede habilitarse utilizando una bandera experimental. Las transiciones de vista actualizan el contenido de tu página sin recargar la navegación completa normal del navegador, lo que proporciona animaciones fluidas entre páginas. +Astro soporta **view transitions opcionales por página** con solo unas pocas líneas de código. Las view transitions actualizan el contenido de tu página sin recargar la navegación completa normal del navegador, lo que proporciona animaciones fluidas entre páginas. -Astro proporciona un componente de enrutamiento `` que se puede agregar al elemento `` de una página individual para controlar las transiciones de página al navegar hacia otra página, un efecto que tradicionalmente solo era posible con el enrutamiento del lado del cliente. Agrega este componente a un archivo `.astro` reutilizable, como una cabecera común o un diseño, para tener transiciones de página animadas en todo tu sitio (en modo SPA). +Astro ofrece un componente de enrutamiento `` que se puede agregar dentro del `` de una sola página para controlar las transiciones de página mientras navegas hacia otra página. Proporciona un enrutador ligero del lado del cliente que [intercepta la navegación](#proceso-de-navegación-del-lado-del-cliente) y te permite personalizar la transición entre páginas. -El soporte de las transiciones de vistas en Astro está impulsado por la nueva API del navegador [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) y también incluye: +Agrega este componente a un componente `.astro` reutilizable, como un encabezado común o un diseño, para lograr [transiciones animadas de página en todo tu sitio (modo SPA)](#transiciones-completas-de-vistas-en-todo-el-sitio-modo-spa). -- Algunas [animaciones integradas](#directivas-de-animación-integradas), como `slide` y `fade`. +El soporte de las view transitions en Astro está impulsado por la nueva API del navegador [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) y también incluye: + +- Algunas [opciones de animación integradas](#directivas-de-animación-integradas), como `fade`, `slice` y `none`. - Soporte para animaciones de navegación hacia adelante y hacia atrás. - La capacidad de [personalizar completamente todos los aspectos de la animación de transición](#personalizando-animaciones) y crear tus propias animaciones. -- [Control sobre el comportamiento de respaldo](#control-de-respaldo) para navegadores que aún no admiten las API de Transiciones de Vistas. +- La opción de [impedir la navegación del lado del cliente para enlaces que no sean de página](#preventing-client-side-navigation). +- [Control sobre el comportamiento de respaldo](#control-de-respaldo) para navegadores que aún no admiten las API de View Transitions. +- Soporte automático para [`prefers-reduced-motion`](#prefers-reduced-motion). -:::caution -Las transiciones de vistas son una función experimental habilitada en Astro 2.9. La API está sujeta a cambios antes de que sea marcada como estable. -::: +::note +Por defecto, cada página utilizará la navegación normal del navegador, ocupando toda la página. Debes elegir activamente las view transitions a y puedes utilizarlas ya sea en base a cada página individual o en todo el sitio. +:: -## Habilitando las transiciones de vistas en tu proyecto +## Agregando View Transitions a una Página -Puedes habilitar el soporte para transiciones de página animadas a través de la bandera experimental `viewTransitions` en la configuración de Astro: +Opta por utilizar view transitions en páginas individuales importando y añadiendo el componente de enrutamiento `` dentro del `` en cada página deseada. -```js title="astro.config.mjs" ins={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - viewTransitions: true - } -}); +```astro title="src/pages/index.astro" ins={2,7} +--- +import { ViewTransitions } from 'astro:transitions'; +--- + + + Mi página de inicio + + + +

¡Bienvenido a mi sitio web!

+ + ``` -:::note -Habilitar el soporte para las view transitions no convierte automáticamente todo tu sitio en una SPA (Aplicación de página única). Por defecto, cada página seguirá utilizando la navegación normal del navegador, es decir, recargando la página por completo. - -Para agregar transiciones de página en Astro, utiliza el componente de enrutamiento `` de forma específica para cada página o en todo el sitio. -::: - -## Transiciones completas de vistas en todo el sitio (modo SPA) +## View transitions completas en todo el sitio (modo SPA) Importa y agrega el componente `` a tu componente `` común o de diseño compartido. Astro creará animaciones de página predeterminadas basadas en las similitudes entre la página antigua y la nueva, y también proporcionará un comportamiento de respaldo para los navegadores que no lo admitan. -El ejemplo a continuación muestra cómo agregar transiciones de vista de página en todo el sitio importando y añadiendo este componente a un componente `` de Astro: +El ejemplo a continuación muestra cómo agregar las animaciones de navegación de página predeterminadas de Astro en todo el sitio, incluida la opción de control alternativo predeterminado para navegadores que no las admiten, importando y agregando este componente a un componente `` de Astro: ```astro title="components/CommonHead.astro" ins={2,12} --- @@ -62,6 +65,10 @@ import { ViewTransitions } from 'astro:transitions'; ``` +¡No es necesario realizar ninguna otra configuración para habilitar la navegación predeterminada del lado del cliente en Astro! + +Utiliza [directivas de transición](#directivas-de-transición) o [anula la navegación predeterminada del lado del cliente](#previniendo-la-navegación-del-lado-del-cliente) en elementos individuales para un control más preciso. + ## Directivas de transición Astro asignará automáticamente a los elementos encontrados tanto en la página antigua como en la nueva un `view-transition-name` compartido y único. Esta pareja de elementos coincidentes es inferida por el tipo de elemento y su ubicación en el DOM. @@ -73,7 +80,7 @@ Utiliza las directivas opcionales `transition:*` en los elementos de la página - `transition: persist`: Te permite anular el reemplazo predeterminado de los elementos antiguos por los nuevos de Astro y, en su lugar, [persistir los componentes y elementos HTML](#mantener-el-estado) al navegar a otra página. -## Nombrando una transición +### Nombrando una transición En algunos casos, es posible que desees o necesites identificar los elementos de transición de vista correspondientes tú mismo. Puedes especificar un nombre para un par de elementos utilizando la directiva `transition:name`. @@ -85,9 +92,9 @@ En algunos casos, es posible que desees o necesites identificar los elementos de