RadSideDrawer Transitions

RadSideDrawer comes with several predefined transitions which are used to animate the drawer and main content panes when switching between open and closed states. The following list presents the predefined transitions:

• FadeTransition - provides a fading animation for the displayed drawer content.
• PushTransition - provides an animation showing the main content being pushed out by the side content.
• RevealTransition - provides an animation showing the main content uncovering the side content.
• ReverseSlideOutTransition - provides an animation showing the drawer content reverse sliding out of the main content.
• ScaleDownPusherTransition - provides a scale down animation of the drawer content.
• ScaleUpTransition - provides a scale up animation of the drawer content from beneath the main content.
• SlideAlongTransition - provides an animation of the side content sliding along the main content.
• SlideInOnTopTransition - provides an animation of the side content sliding in on top of the main content.

To use a specific transition, you need to set an instance of it to the drawerTransition property of a RadSideDrawer instance:

public onSlideInOnTopTransitionTap(args) {
    this.setDrawerTransition(new drawerModule.SlideInOnTopTransition());
    this.openSideDrawer();
}

public openSideDrawer(args?: observableModule.EventData) {
    let drawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>Frame.topmost().getViewById("sideDrawer");
    drawer.showDrawer();
}

public closeDrawer(args?: observableModule.EventData) {
    let drawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>Frame.topmost().getViewById("sideDrawer");
    drawer.closeDrawer();
}

private setDrawerTransition(transition: drawerModule.DrawerTransitionBase) {
    let drawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>Frame.topmost().getViewById("sideDrawer");
    drawer.drawerTransition = transition;
}

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

• Transitions Example