diff --git a/src/content/docs/fr/guides/view-transitions.mdx b/src/content/docs/fr/guides/view-transitions.mdx index dd0bf025cbe63..247fb0248a3e4 100644 --- a/src/content/docs/fr/guides/view-transitions.mdx +++ b/src/content/docs/fr/guides/view-transitions.mdx @@ -1,20 +1,20 @@ --- -title: Transitions de Vue (View Transitions) +title: Transitions de vue description: >- - Permettre une navigation fluide entre les pages dans Astro grâce à des Transitions de Vue. + Permettre une navigation fluide entre les pages dans Astro grâce aux transitions de vue. i18nReady: true --- import Since from '~/components/Since.astro' import { Steps } from '@astrojs/starlight/components' -Astro prend en charge les **Transitions de Vues intégrées, par page**, avec seulement quelques lignes de code. Les Transitions de Vues mettent à jour le contenu de votre page sans que la navigation normale de la page entière ne soit rafraîchie et offrent des animations transparentes entre les pages. +Astro prend en charge **l'adhésion aux transitions de vue par page** avec seulement quelques lignes de code. Les transitions de vue mettent à jour le contenu de votre page sans l'actualisation normale de la navigation pleine page du navigateur et offrent des animations transparentes entre les pages. -Astro fournit un composant de routage `` qui peut être ajouté au `` d'une page unique pour contrôler les transitions entre les pages lorsque vous naviguez vers une autre page. Il fournit un routeur léger côté client qui [intercepte la navigation](#processus-de-navigation-du-côté-client) et vous permet de naviguer entre les pages. +Astro fournit un composant de routage `` qui peut être ajouté au `` d'une page unique pour contrôler les transitions entre les pages lorsque vous naviguez vers une autre page. Il fournit un routeur léger côté client qui [intercepte la navigation](#processus-de-navigation-du-côté-client) et vous permet de naviguer entre les pages. Ajoutez ce composant à un composant `.astro` réutilisable, tel qu'un en-tête ou une mise en page commune, pour [des transitions de page animées sur l'ensemble de votre site (mode SPA)](#transitions-de-vue-du-site-complet-mode-spa). -La prise en charge des Transitions de Vues par Astro est assurée par la nouvelle API du navigateur [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) et comprend également les éléments suivants : +La prise en charge des transitions de vue par Astro est assurée par la nouvelle API du navigateur [View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) et comprend également les éléments suivants : - Quelques [options d'animation intégrées](#directives-danimation-intégrées), telles que `fade`, `slide`, et `none`. - Le support des animations de navigation vers l'avant et vers l'arrière. @@ -30,16 +30,16 @@ Par défaut, chaque page utilise la navigation normale, pleine page, du navigate ## Ajouter des Transitions de Vue à une page -Optez pour l'utilisation des Transitions de Vue sur des pages individuelles en important et en ajoutant le composant de routage `` à `` sur chaque page souhaitée. +Optez pour l'utilisation des transitions de vue sur des pages individuelles en important et en ajoutant le composant de routage `` dans la balise `` sur chaque page souhaitée. ```astro title="src/pages/index.astro" ins={2,7} --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- Ma page d'accueil - +

Bienvenue sur mon site web !

@@ -47,25 +47,25 @@ import { ViewTransitions } from 'astro:transitions'; ``` -## Transitions de Vue du site complet (mode SPA) +## Transitions de vue du site complet (mode SPA) -Importez et ajoutez le composant `` à votre `` commun ou au composant de mise en page partagé. Astro créera des animations de page par défaut basées sur les similitudes entre l'ancienne et la nouvelle page, et fournira également un comportement de repli pour les navigateurs non pris en charge. +Importez et ajoutez le composant `` à votre `` commun ou au composant de mise en page partagé. Astro créera des animations de page par défaut basées sur les similitudes entre l'ancienne et la nouvelle page, et fournira également un comportement de repli pour les navigateurs non pris en charge. L'exemple ci-dessous montre l'ajout des animations de navigation par défaut d'Astro sur l'ensemble du site, y compris l'option de contrôle de repli par défaut pour les navigateurs non compatibles, en important et en ajoutant ce composant à un composant `` d'Astro : ```astro title="src/components/CommonHead.astro" ins={2,12} --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- - + {title} - + ``` Aucune autre configuration n'est nécessaire pour activer la navigation côté client par défaut d'Astro ! @@ -74,7 +74,7 @@ Utilisez les [directives de transition](#directives-de-transition) ou [remplacer ## Directives de transition -Astro attribuera automatiquement aux éléments correspondants trouvés à la fois dans l'ancienne et la nouvelle page un `nom de transition de vue` unique et partagé. Cette paire d'éléments correspondants est déduite à la fois du type d'élément et de son emplacement dans le DOM. +Astro attribuera automatiquement aux éléments correspondants trouvés à la fois dans l'ancienne et la nouvelle page un nom unique et partagé `view-transition-name`. Cette paire d'éléments correspondants est déduite à la fois du type d'élément et de son emplacement dans le DOM. Utilisez les directives optionnelles `transition:*` sur les éléments de page dans vos composants `.astro` pour un contrôle plus fin du comportement de transition de la page pendant la navigation. @@ -153,7 +153,7 @@ Vous pouvez modifier ce comportement en définissant `transition:persist-props` Astro est livré avec quelques animations intégrées pour remplacer la transition par défaut `fade`. Ajoutez la directive `transition:animate` à des éléments individuels pour personnaliser le comportement de transitions spécifiques. - `fade` (par défaut) : Une animation de fondu enchaîné. L'ancien contenu disparaît et le nouveau contenu apparaît en fondu. -- `initial` : Permet de ne pas utiliser l'animation de fondu-enchaîné d'Astro et d'utiliser le style par défaut du navigateur. +- `initial` : Permet de ne pas utiliser l'animation de fondu enchaîné d'Astro et d'utiliser le style par défaut du navigateur. - `slide` : Une animation où l'ancien contenu glisse vers la gauche et le nouveau contenu glisse vers la droite. En navigation arrière, les animations sont inversées. - `none` : Désactive les animations par défaut du navigateur. À utiliser sur l'élément `` d'une page pour désactiver le fondu par défaut pour tous les éléments de la page. @@ -227,12 +227,12 @@ L'exemple suivant montre toutes les propriétés nécessaires pour définir une ```astro title="src/layouts/Layout.astro" --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- - + @@ -289,10 +289,10 @@ Vous disposez d'une grande flexibilité pour définir des animations personnalis ## Contrôle du routeur -Le routeur `` gère la navigation en observant : +Le routeur `` gère la navigation en observant : -- Clics sur les éléments ``. -- Événements de navigation vers l'avant et vers l'arrière. +- les clics sur les éléments ``. +- les événements de navigation vers l'avant et vers l'arrière. Les options suivantes vous permettent de contrôler davantage le moment où la navigation s'effectue dans le routeur : @@ -302,9 +302,9 @@ Les options suivantes vous permettent de contrôler davantage le moment où la n ### Empêcher la navigation côté client -Dans certains cas, il n'est pas possible de naviguer via le routage côté client, car les deux pages concernées doivent utiliser le routeur `` pour éviter un rechargement complet de la page. Il se peut également que vous ne souhaitiez pas un routage côté client à chaque changement de navigation et que vous préfériez une navigation de page traditionnelle sur des itinéraires sélectionnés. +Dans certains cas, il n'est pas possible de naviguer via le routage côté client, car les deux pages concernées doivent utiliser le routeur `` pour éviter un rechargement complet de la page. Il se peut également que vous ne souhaitiez pas un routage côté client à chaque changement de navigation et que vous préfériez une navigation de page traditionnelle sur des itinéraires sélectionnés. -Vous pouvez renoncer au routage côté client pour chaque lien en ajoutant l'attribut `data-astro-reload` à n'importe quelle balise `` ou `
`. Cet attribut remplacera tout composant `` existant et déclenchera à la place un rafraîchissement du navigateur pendant la navigation. +Vous pouvez renoncer au routage côté client pour chaque lien en ajoutant l'attribut `data-astro-reload` à n'importe quelle balise `` ou ``. Cet attribut remplacera tout composant `` existant et déclenchera à la place un rafraîchissement du navigateur pendant la navigation. L'exemple suivant montre que l'on empêche le routage côté client lorsque l'on navigue au sein d'un article à partir de la page d'accueil uniquement. Cela permet néanmoins d'animer des éléments partagés, tels qu'une image de héros, lorsque l'on navigue vers la même page à partir d'une page de liste d'articles : @@ -320,7 +320,7 @@ Les liens avec l'attribut `data-astro-reload` seront ignorés par le routeur et ### Déclenchement de la navigation -Vous pouvez aussi déclencher la navigation côté client via des événements qui ne sont pas normalement écoutés par le routeur `` en utilisant `navigate`. Cette fonction du module `astro:transitions/client` peut être utilisée dans les scripts et dans les composants du framework qui sont hydratés avec une [directive client](/fr/reference/directives-reference/#directives-client). +Vous pouvez aussi déclencher la navigation côté client via des événements qui ne sont pas normalement écoutés par le routeur `` en utilisant `navigate`. Cette fonction du module `astro:transitions/client` peut être utilisée dans les scripts et dans les composants du framework qui sont hydratés avec une [directive client](/fr/reference/directives-reference/#directives-client). L'exemple suivant montre un composant Astro qui permet à un visiteur de naviguer vers une autre page qu'il sélectionne dans un menu : ```astro title="src/components/Form.astro" @@ -343,11 +343,11 @@ L'exemple suivant montre un composant Astro qui permet à un visiteur de navigue ```astro title="src/pages/index.astro" --- import Form from "../components/Form.astro"; -import { ViewTransitions } from "astro:transitions"; +import { ClientRouter } from "astro:transitions"; --- - + @@ -371,16 +371,16 @@ export default function Form() { ); } ``` -Le composant `` peut alors être rendu sur une page Astro qui utilise le routeur ``, avec une directive client : +Le composant `` peut alors être rendu sur une page Astro qui utilise le routeur ``, avec une directive client : ```astro title="src/pages/index.astro" --- import Form from "../components/form.jsx"; -import { ViewTransitions } from "astro:transitions"; +import { ClientRouter } from "astro:transitions"; --- - + @@ -404,7 +404,7 @@ Pour la navigation vers l'arrière et vers l'avant dans l'historique du navigate Normalement, chaque fois que vous naviguez, une nouvelle entrée est inscrite dans l'historique du navigateur. Cela permet de naviguer entre les pages à l'aide des boutons "retour" et "avant" du navigateur. -Le routeur `` vous permet d'écraser les entrées de l'historique en ajoutant l'attribut `data-astro-history` à n'importe quelle balise ``. +Le routeur `` vous permet d'écraser les entrées de l'historique en ajoutant l'attribut `data-astro-history` à n'importe quelle balise ``. L'attribut `data-astro-history` peut être défini avec les trois mêmes valeurs que l'option [`history` de la fonction `navigate()`](#déclenchement-de-la-navigation) : @@ -425,7 +425,7 @@ Cela a pour effet que si vous revenez en arrière à partir de la page `/main`,

-Le routeur `` déclenche des transitions dans la page à partir d'éléments ``, supportant à la fois les requêtes `GET` et `POST`. +Le routeur `` déclenche des transitions dans la page à partir d'éléments ``, supportant à la fois les requêtes `GET` et `POST`. Par défaut, Astro soumet les données de votre formulaire en tant que `multipart/form-data` lorsque votre `method` est réglé sur `POST`. Si vous voulez correspondre au comportement par défaut des navigateurs web, utilisez l'attribut `enctype` pour soumettre vos données encodées en tant que `application/x-www-form-urlencoded` : @@ -445,9 +445,9 @@ Vous pouvez refuser les transitions de routeur sur un formulaire individuel en u ## Gestion de solution de secours -Le routeur `` fonctionne mieux dans les navigateurs qui supportent les Transitions de Vues (c'est-à-dire les navigateurs Chromium), mais il inclut également un support de secours par défaut pour les autres navigateurs. Même si le navigateur ne prend pas en charge l'API View Transitions, Astro fournira toujours une navigation dans le navigateur en utilisant l'une des options de secours pour une expérience comparable. +Le routeur `` fonctionne mieux dans les navigateurs qui supportent les Transitions de Vues (c'est-à-dire les navigateurs Chromium), mais il inclut également un support de secours par défaut pour les autres navigateurs. Même si le navigateur ne prend pas en charge l'API View Transitions, Astro fournira toujours une navigation dans le navigateur en utilisant l'une des options de secours pour une expérience comparable. -Vous pouvez surcharger le support par défaut d'Astro en ajoutant une propriété `fallback` sur le composant `` et en la réglant sur `swap` ou `none` : +Vous pouvez surcharger le support par défaut d'Astro en ajoutant une propriété `fallback` sur le composant `` et en la réglant sur `swap` ou `none` : - `animate` (par défaut, recommandé) - Astro simulera des transitions de vues en utilisant des attributs personnalisés avant de mettre à jour le contenu de la page. - `swap` - Astro n'essaiera pas d'animer la page. Au lieu de cela, l'ancienne page sera immédiatement remplacée par la nouvelle. @@ -455,11 +455,11 @@ Vous pouvez surcharger le support par défaut d'Astro en ajoutant une propriét ```astro --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- Mon site - + ``` :::note[Limitations connues] @@ -468,7 +468,7 @@ L'animation `initiale` du navigateur n'est pas simulée par Astro. Par conséque ## Processus de navigation du côté client -Lors de l'utilisation du routeur ``, les étapes suivantes se produisent pour produire la navigation côté client d'Astro : +Lors de l'utilisation du routeur ``, les étapes suivantes se produisent pour produire la navigation côté client d'Astro : 1. Un visiteur de votre site déclenche la navigation par l'une des actions suivantes : @@ -504,7 +504,7 @@ Lorsque vous ajoutez des transitions de vue à un projet Astro existant, il se p ### Ordre de script -Lorsque l'on navigue entre les pages avec le composant ``, les scripts sont exécutés dans un ordre séquentiel pour correspondre au comportement du navigateur. +Lorsque l'on navigue entre les pages avec le composant ``, les scripts sont exécutés dans un ordre séquentiel pour correspondre au comportement du navigateur. ### Réexécution du script @@ -514,6 +514,8 @@ Contrairement aux scripts de modules intégrés, les scripts [inline](/fr/guides Avec les transitions de vue, certains scripts peuvent ne plus être réexécutés après la navigation vers une nouvelle page comme c'est le cas avec les actualisations complètes du navigateur. Il existe plusieurs [événements pendant le routage côté client que vous pouvez écouter](#événements-du-cycle-de-vie) et déclencher des événements lorsqu'ils se produisent. Vous pouvez encapsuler un script existant dans un écouteur d'événements pour garantir qu'il s'exécute au bon moment dans le cycle de navigation. +L'exemple suivant encapsule un script pour un menu mobile « hamburger » dans un écouteur d'événement pour `astro:page-load` qui s'exécute à la fin de la navigation dans la page pour rendre le menu réactif lorsqu'on clique dessus après la navigation vers une nouvelle page : + ```js title="src/scripts/menu.js" ins={2,6} ``` +L'exemple suivant montre une fonction qui s'exécute en réponse à l'événement `astro:after-swap`, qui se produit immédiatement après que la nouvelle page a remplacé l'ancienne page et avant que les éléments DOM ne soient affichés à l'écran. Cela permet d'éviter un flash de thème clair après la navigation dans la page en vérifiant et, si nécessaire, en définissant le thème en mode sombre avant le rendu de la nouvelle page : + +```astro title="src/components/ThemeToggle.astro" + +``` + #### `data-astro-rerun`

@@ -548,7 +565,7 @@ Si vous avez du code qui établit un état global dans un script en ligne, cet ## Événements du cycle de vie -Le routeur `` déclenche un certain nombre d'événements sur le `document` pendant la navigation. Ces événements fournissent des crochets dans le cycle de vie de la navigation, vous permettant de faire des choses comme montrer des indicateurs qu'une nouvelle page est en train de se charger, surcharger le comportement par défaut, et restaurer l'état lorsque la navigation se termine. +Le routeur `` déclenche un certain nombre d'événements sur le `document` pendant la navigation. Ces événements fournissent des crochets dans le cycle de vie de la navigation, vous permettant de faire des choses comme montrer des indicateurs qu'une nouvelle page est en train de se charger, surcharger le comportement par défaut, et restaurer l'état lorsque la navigation se termine. Le processus de navigation comprend une phase de **préparation**, au cours de laquelle le nouveau contenu est chargé ; une phase d'**échange de DOM**, au cours de laquelle le contenu de l'ancienne page est remplacé par celui de la nouvelle ; et une phase d'**achèvement**, au cours de laquelle les scripts sont exécutés, le chargement est signalé comme étant terminé et le travail de nettoyage est effectué. @@ -637,7 +654,7 @@ Cet événement peut être utilisé pour effectuer des modifications avant que l ``` -L'événement `astro:before-swap` peut aussi être utilisé pour changer l'*implémentation* de la permutation. L'implémentation par défaut de la permutation diffère le contenu de l'en-tête, déplace les éléments __persistent__ de l'ancien document vers le `nouveauDocument`, et remplace ensuite le `body` entier par le corps du nouveau document. +L'événement `astro:before-swap` peut aussi être utilisé pour changer l'*implémentation* de la permutation. L'implémentation par défaut de la permutation diffère le contenu de l'en-tête, déplace les éléments __persistants__ de l'ancien document vers `newDocument`, et remplace ensuite le `body` entier par le corps du nouveau document. À ce stade du cycle de vie, vous pouvez choisir de définir votre propre implémentation de l'échange, par exemple pour diffuser l'intégralité du contenu du document existant (ce que font certains autres routeurs) : @@ -701,7 +718,7 @@ document.addEventListener('astro:after-swap', Un événement qui se déclenche à la fin de la navigation de la page, après que la nouvelle page soit visible par l'utilisateur et que les styles et les scripts bloquants soient chargés. Vous pouvez écouter cet événement sur le `document`. -Le composant `` déclenche cet événement à la fois lors de la navigation initiale sur une page pré-rendue et lors de toute navigation ultérieure, que ce soit en avant ou en arrière. +Le composant `` déclenche cet événement à la fois lors de la navigation initiale sur une page pré-rendue et lors de toute navigation ultérieure, que ce soit en avant ou en arrière. Vous pouvez utiliser cet événement pour exécuter du code à chaque navigation de page, par exemple pour configurer des écouteurs d'événements qui autrement seraient perdus pendant la navigation. @@ -722,9 +739,9 @@ L'activation du routage côté client et l'animation des transitions de page pos

-Le composant `` inclut un annonceur de route pour la navigation de page pendant le routage côté client. Aucune configuration ou action n'est nécessaire pour l'activer. +Le composant `` inclut un annonceur de route pour la navigation de page pendant le routage côté client. Aucune configuration ou action n'est nécessaire pour l'activer. -Les technologies d'assistance permettent aux visiteurs de savoir que la page a changé en annonçant le nouveau titre de la page après la navigation. Lors de l'utilisation du routage côté serveur avec un rafraîchissement traditionnel de la page entière du navigateur, cela se produit par défaut après le chargement de la nouvelle page. Dans le cas du routage côté client, c'est le composant `` qui effectue cette action. +Les technologies d'assistance permettent aux visiteurs de savoir que la page a changé en annonçant le nouveau titre de la page après la navigation. Lors de l'utilisation du routage côté serveur avec un rafraîchissement traditionnel de la page entière du navigateur, cela se produit par défaut après le chargement de la nouvelle page. Dans le cas du routage côté client, c'est le composant `` qui effectue cette action. Pour ajouter l'annonce d'itinéraire au routage côté client, le composant ajoute un élément à la nouvelle page avec l'attribut `aria-live` fixé à `assertive`. Cela indique à AT (technologie d'assistance) d'annoncer immédiatement. Le composant vérifie également les éléments suivants, par ordre de priorité, pour déterminer le texte de l'annonce : @@ -736,4 +753,4 @@ Nous vous recommandons vivement de toujours inclure un `` dans chaque pag ### `prefers-reduced-motion` -Le composant `<ViewTransitions />` d'Astro inclut une requête média CSS qui désactive *toutes* les animations de transition de vue, y compris l'animation de secours, lorsque le paramètre [`prefer-reduced-motion`](https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion) est détecté. À la place, le navigateur échangera simplement les éléments DOM sans animation. +Le composant `<ClientRouter />` d'Astro inclut une requête média CSS qui désactive *toutes* les animations de transition de vue, y compris l'animation de secours, lorsque le paramètre [`prefer-reduced-motion`](https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion) est détecté. À la place, le navigateur échangera simplement les éléments DOM sans animation.