Transitions

Composant de transition pour les applications Universal.

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.

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

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.

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

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.

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.

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

Grow

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

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

Zoom

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

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

API

• New-UDTransition