# Transitions

Transitions allow you to transition components in and out of view within your dashboard using various animations. You can take advantage of interactive cmdlets like `Set-UDElement` to change the transition state and cause an element to move in.

In the following example, we have a card that transitions in via a Fade. Clicking the switch the toggle the card in and out.

```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
```

The resulting effect looks like this.

![Transition a card](https://1373299915-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8F6PrkNTG8Y34hADzKOL%2Fuploads%2Fgit-blob-423c64f56f784efda9c6bcbfd226cd4b3b8a6f6f%2Ftransition.gif?alt=media)

## Collapse

The collapse transition will collapse a section in and out. You can specify a collapse height to only collapse a portion of the 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](https://1373299915-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8F6PrkNTG8Y34hADzKOL%2Fuploads%2Fgit-blob-5229d84e715c01b9f8b456e134d102d4437ad968%2Fcollapse.gif?alt=media)

## Fade

A fade transition fades a component in and out as seen in the previous example. You can configure the timeout value to specify the number of seconds it takes to complete the 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

The slide transition moves a component into position. You can determine the position of the slide by specifying the `-SlideDirection` parameter.

```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](https://1373299915-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8F6PrkNTG8Y34hADzKOL%2Fuploads%2Fgit-blob-832cf29b6b02e84eff00fba61c3ff3c6335f7826%2Fslide.gif?alt=media)

## Grow

The grow transition will fade and grow a component into place.

```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](https://1373299915-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8F6PrkNTG8Y34hADzKOL%2Fuploads%2Fgit-blob-32b8521e113c234bddb8b847fe494fc17c45bc90%2Fgrow.gif?alt=media)

## Zoom

The zoom transition will zoom a component into place.

```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](https://1373299915-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8F6PrkNTG8Y34hADzKOL%2Fuploads%2Fgit-blob-a1e0ea6369e7d2693e236a830cd4f632cc4d2de2%2Fzoom.gif?alt=media)

## API

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