> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/fr/apps/components/utilities/transitions.md).

# Transitions

Les transitions vous permettent de faire apparaître et disparaître des composants dans votre tableau de bord à l'aide de diverses animations. Vous pouvez tirer parti de cmdlets interactives comme `Set-UDElement` pour modifier l'état de la transition et provoquer le déplacement d'un élément.

Dans l'exemple suivant, une carte apparaît via un effet Fade. Cliquer sur le commutateur permet d'afficher et de masquer la carte.

```powershell
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

L'effet obtenu ressemble à ceci.

![Transition a card](/files/tgd9CNW5UhKbDsWwo6f4)

## Collapse

La transition Collapse réduit et développe une section. Vous pouvez spécifier une hauteur de réduction pour ne replier qu'une partie de la section.

```powershell
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Collapse -CollapseHeight 100 -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Collapse Transition](/files/Lj6CLWKJlxJtYZmGbkTW)

## Fade

Une transition Fade fait apparaître et disparaître progressivement un composant, comme illustré dans l'exemple précédent. Vous pouvez configurer la valeur du délai d'attente pour spécifier le nombre de secondes nécessaires à l'exécution de la transition.

```powershell
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

## Slide

La transition Slide déplace un composant vers sa position. Vous pouvez déterminer la direction du glissement en spécifiant le paramètre `-SlideDirection`.

```powershell
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Slide -SlideDirection 'left' -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Slide Transition](/files/qcwFv6qqKy0IRLkamdZG)

## Grow

La transition Grow fait apparaître un composant en le faisant croître progressivement avec un effet de fondu.

```powershell
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Grow -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Grow Transition](/files/YAIi1eFNNtScwOIx5hKw)

## Zoom

La transition Zoom fait apparaître un composant en effectuant un zoom avant.

```powershell
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Zoom -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Zoom Transition](/files/8RII5xRR5TGa6X4VyX9b)

## API

* [New-UDTransition](https://github.com/ironmansoftware/universal-docs/blob/v5/cmdlets/New-UDTransition.txt)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/fr/apps/components/utilities/transitions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.