# Transition

Transition effect in UniWebView is easy. We provide several visual transition effect you could use to show/hide your web view. You can also animate the position and size of web view on the screen.

# Show / Hide Transition

When you need to show or hide the web view, you call Show() or Hide() on it. These two methods accepts several parameters to define a better visual effect and natural transition experience. The full signatures of these methods are:

bool Show(bool fade = false, UniWebViewTransitionEdge edge = UniWebViewTransitionEdge.None, 
          float duration = 0.4f, Action completionHandler = null)

bool Hide(bool fade = false, UniWebViewTransitionEdge edge = UniWebViewTransitionEdge.None,
          float duration = 0.4f, Action completionHandler = null)

By default, the transition is disabled and the duration is ignored. If you set either the fade to true or the edge to any value except for UniWebViewTransitionEdge.None, the operation will happen with a transition animation.

fade will fade in or fade out the web view while show or hide, while edge will define the from or to edge while show or hide respectively. The edge transition is a modal presenting or dismissing animation. See the example below:

webView.Frame = new Rect(0, 0, Screen.width, Screen.height);
webView.Show(true, UniWebViewTransitionEdge.Bottom, 0.35f);

// Some time later
webView.Hide(true, UniWebViewTransitionEdge.Bottom, 0.35f);

The result of above code is:

# Web View Animation

UniWebView also supports to animate the web view freely when it is displayed. Use AnimateTo method and you could specify a frame as the destination frame. By using this method, you can also set duration and delay to the animation for a fine control.

// Animate the web view from full screen to half screen:
webView.Frame = new Rect(0, 0, Screen.width, Screen.height);

var halfScreen = new Rect(0, 0, Screen.width, Screen.height / 2.0);

// The animation will last for 400ms and with 100ms delay:
webView.AnimateTo(halfScreen, 0.4f, 0.1f, ()=>{
    print("Animation finished!");
});

For more about transition and animation, read the documentation for UniWebView.