RadSideDrawer Transitions

This article explains how to set the transition type of the RadSideDrawer with Angular.

Set Transition with Angular

RadSideDrawer offers the following transition options:

• 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.

The trasition style of the RadSideDrawer can be manipulated through the transition property of the RadSideDrawerComponent.

<RadSideDrawer [drawerTransition]="sideDrawerTransition" tkExampleTitle tkToggleNavButton>

In the snippet above we have binded the transition property to the sideDrawerTransition variable. Now we should create the sideDrawerTransition variable and give it a value.

export class SideDrawerTransitionsComponent implements AfterViewInit, OnInit {
    private _sideDrawerTransition: DrawerTransitionBase;

    constructor(private _changeDetectionRef: ChangeDetectorRef) {
    }

    @ViewChild(RadSideDrawerComponent, { static: false }) public drawerComponent: RadSideDrawerComponent;

    private drawer: RadSideDrawer;


    public currentTransition: string;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this.sideDrawerTransition = new PushTransition();
        this._changeDetectionRef.detectChanges();
    }

    ngOnInit() {
    }

    get sideDrawerTransition(): DrawerTransitionBase {
        return this._sideDrawerTransition;
    }

    set sideDrawerTransition(value: DrawerTransitionBase) {
        this._sideDrawerTransition = value;
    }

}