August 6, 2016

Make modal to slide from right in ionic

Make modal to slide from right in ionic

In ionic version 1 you can find modal sliding from bottom to top called as slide-in-up. This is default and there is no option to make it slide from right to left or left to right.

So i thought to write animation sliding in CSS3 where the modal slides in from right to left called as slide-in-right. Here you can see how it's done.

CSS

.slide-in-right {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.slide-in-right.ng-enter,
.slide-in-right > .ng-enter {
    -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
}

.slide-in-right.ng-enter-active,
.slide-in-right > .ng-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide-in-right.ng-leave,
.slide-in-right > .ng-leave {
    -webkit-transition: all ease-in-out 250ms;
    transition: all ease-in-out 250ms;
}

Call that animation name in AngularJS controller.

Javascript

 $ionicModal.fromTemplateUrl('TEMPLATE-URL.html', {
     scope: $scope,
     animation: 'slide-in-right'
 }).then(function(modal) {
        ...
 });
demo

1 comment:

Popular Posts

Views