diff --git a/src/content/docs/fr/guides/view-transitions.mdx b/src/content/docs/fr/guides/view-transitions.mdx index 8aaee9d32214b..ef770f87dcf0a 100644 --- a/src/content/docs/fr/guides/view-transitions.mdx +++ b/src/content/docs/fr/guides/view-transitions.mdx @@ -659,101 +659,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 repli, 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. - -## Mise à jour de la v2.x vers la v3.0 - -Les Transitions de Vues ne sont plus derrière un paramètre expérimental dans Astro v3.0. - -Si vous n'aviez pas activé ce paramètre expérimental dans Astro 2.x, il n'y aura pas de changement majeur dans votre projet. La nouvelle API de Transitions de Vues n'a aucun effet sur votre code existant. - -Si vous utilisiez auparavant des Transitions de Vue expérimentales, il se peut que vous ayez à effectuer des changements lors de la mise à jour de votre projet Astro à partir d'une version antérieure. - -Veuillez suivre les instructions ci-dessous pour mettre à jour **un projet Astro v2.x configuré avec `experimental.viewTransitions : true`** vers la v3.0. - -### Mise à jour de `experimental.viewTransitions` - -Si vous aviez précédemment activé le paramètre expérimental pour les Transitions de Vue, vous devriez mettre à jour votre projet pour la version 3.0 d'Astro qui autorise désormais les Transitions de Vue par défaut. - -#### Supprimer le paramètre `experimental.viewTransitions`. - -Supprimer le paramètre expérimental : - -```js title="astro.config.mjs" del={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - viewTransitions: true - } -}); -``` - -#### Mise à jour de la source d'importation - -Le composant `<ViewTransitions />` a été déplacé de `astro:components` vers `astro:transitions`. Mettez à jour la source d'importation pour toutes les occurrences dans votre projet. - -```astro title="src/layouts/BaseLayout.astro" del="astro:components" ins="astro:transitions" ---- -import { ViewTransitions } from "astro:components astro:transitions" ---- -<html lang="fr"> - <head> - <title>Ma page d'accueil - - - -

Bienvenue sur mon site web !

- - -``` - -#### Mise à jour des directives `transition:animate`. - -**Modifié :** La valeur `transition:animate` `morph` a été renommée en `initial`. De plus, ce n'est plus l'animation par défaut. Si aucune directive `transition:animate` n'est spécifiée, vos animations seront maintenant par défaut `fade`. - -1. Renommer toutes les animations `morph` en `initial`. - ```astro title="src/components/MyComponent.astro" del="morph" ins="initial" -
- ``` -2. Pour conserver toutes les animations qui utilisaient précédemment `morph` par défaut, ajoutez explicitement `transition:animate="initial"` - - ```astro title="src/components/MyComponent.astro" ins='transition:animate="initial"' -
- ``` -3. Vous pouvez en toute sécurité supprimer toutes les animations explicitement réglées sur `fade`. C'est maintenant le comportement par défaut : - - ```astro title="src/components/MyComponent.astro" del="transition:animate=\"fade\"" -
- ``` - -**Ajouté :** Astro supporte également une nouvelle valeur de `transition:animate`, `none`. Cette valeur peut être utilisée sur l'élément `` d'une page pour désactiver les transitions pleine page animées sur une page entière. Cela ne remplacera que le comportement d'animation par **défaut** sur les éléments de la page sans directive d'animation. Vous pouvez toujours définir des animations sur des éléments individuels, et ces animations spécifiques se produiront. - -4. Vous pouvez désormais désactiver toutes les transitions par défaut sur une page individuelle, en animant uniquement les éléments qui utilisent explicitement une directive `transition:animate` : - - ```astro ins="transition:animate=\"none\"" - - - -

Bonjour le monde !

- - - ``` - -#### Mise à jour des noms d'événements - -L'événement `astro:load` a été renommé en `astro:page-load`. Renommez toutes les occurrences dans votre projet. - -```astro title="src/components/MyComponent.astro" del="astro:load" ins="astro:page-load" - -``` - -L'événement `astro:beforeload` a été renommé en `astro:after-swap`. Renommez toutes les occurrences dans votre projet. - -```astro title="src/components/MyComponent.astro" del="astro:beforeload" ins="astro:after-swap" - -``` +Le composant `` 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.