Skip to content
/ docs Public
forked from withastro/docs

Commit

Permalink
i18n(fr): Update guides/view-transitions from withastro#8646
Browse files Browse the repository at this point in the history 
Signed-off-by: Thomas Bonnet <[email protected]>
  • Loading branch information
@thomasbnt
thomasbnt committed Jun 25, 2024
1 parent 8984703 commit 8beb6ef
Showing 1 changed file with 1 addition and 98 deletions.
99 changes: 1 addition & 98 deletions src/content/docs/fr/guides/view-transitions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -659,101 +659,4 @@ Nous vous recommandons vivement de toujours inclure un `<title>` 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</title>
<ViewTransitions />
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
</body>
</html>
```

#### 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"
<div transition:name="name" transition:animate="morph 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"'
<div transition:name="name" 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\""
<div transition:name="name" transition:animate="fade" />
```

**Ajouté :** Astro supporte également une nouvelle valeur de `transition:animate`, `none`. Cette valeur peut être utilisée sur l'élément `<html>` 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\""
<html transition:animate="none">
<head></head>
<body>
<h1>Bonjour le monde !</h1>
</body>
</html>
```

#### 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"
<script>
document.addEventListener('astro:load astro:page-load', runSetupLogic);
</script>
```

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"
<script>
document.addEventListener('astro:beforeload astro:after-swap', setDarkMode);
</script>
```
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.

0 comments on commit 8beb6ef

Please sign in to comment.