# Titanium.UI.iOS.TransitionAnimation

> A transition animation when opening or closing windows in a [Titanium.UI.NavigationWindow](https://titaniumsdk.com/docs/sdk/Titanium.UI.NavigationWindow.md) or [Titanium.UI.Tab](https://titaniumsdk.com/docs/sdk/Titanium.UI.Tab.md). Use this proxy with the Window's [transitionAnimation](https://titaniumsdk.com/docs/sdk/Titanium.UI.Window.md#transitionAnimation) property.

- Source: https://titaniumsdk.com/docs/sdk/13.3.0/Titanium.UI.iOS.TransitionAnimation
- Titanium SDK version: 13.3.0
- Kind: proxy
- Platforms: iPhone, iPad, macOS
- Since: Titanium SDK iPhone 3.2.0, iPad 3.2.0, macOS 9.2.0
- Extends: Titanium.Proxy
- Inheritance: Titanium.Proxy

## Example: Simple Example

In this example, the red window opens with a transition animation, while closing it uses the
default behavior where it slides off screen.  To add a transition animation when the red
window closes, define a transition animation for the blue window.

``` js
var transition = Ti.UI.iOS.createTransitionAnimation({
    duration: 300,
    // The show transition makes the window opaque and rotates it correctly
    transitionTo: {
        opacity: 1,
        duration: 300,
        transform: Ti.UI.createMatrix2D()
    },
    // The hide transition makes the window transparent and rotates it upside down
    transitionFrom: {
        opacity: 0,
        duration: 300 / 2,
        transform: Ti.UI.createMatrix2D().rotate(180),
    }
});

var win2 = Ti.UI.createWindow({
    backgroundColor: 'red',
    title: 'Red Window',
    transitionAnimation: transition,
    opacity: 0,
    transform: Ti.UI.createMatrix2D().rotate(180)
});
var button2 = Ti.UI.createButton({
    title: 'Close Red Window'
});
button2.addEventListener('click', function(){
    nav.closeWindow(win2);
    // In order to see the blue window again,
    // need to reverse the transition animation
    win1.opacity = 1;
    win1.transform = Ti.UI.createMatrix2D().rotate(0);
});
win2.add(button2);

var win1 = Ti.UI.createWindow({
    backgroundColor: 'blue',
    title: 'Blue Window',
    // Uncomment to use a transition animation when the blue window is closed
    // transitionAnimation: transition
});
var button1 = Ti.UI.createButton({title: 'Open Red Window'});
button1.addEventListener('click', function(){
    nav.openWindow(win2);
});
win1.add(button1);

var nav = Ti.UI.createNavigationWindow({
    window: win1
});
nav.open();
```

## Properties

### duration

- Type: Number
- Platforms: iPhone, iPad, macOS

Length of the transition in milliseconds.

### transitionFrom

- Type: Titanium.UI.Animation
- Platforms: iPhone, iPad, macOS

Animation to hide the current window.

### transitionTo

- Type: Titanium.UI.Animation
- Platforms: iPhone, iPad, macOS

Animation to show the new window.

## Inherited members

6 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.3.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `removeEventListener`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.