CODEWITHSUNDEEP
angularjsionic-frameworkcordova-plugins
ChandrasekarG
ChandrasekarG

Reputation: 1383

How to include native transitions to ionic modals?

I built an ionic App and initially the transitions were slow. So, I opted for ionic-native-transitions plugin . Now that the app transitions became smoother I'm trying to apply these transitions for my ionic modals. Below is the function I use to set my modal in ionic.

function LoadFilter(){
$ionicModal.fromTemplateUrl('templates/filter.html', {
  scope: $scope
}).then(function(modal) {
  $scope.modal = modal;
  $scope.modal.show();
});

$scope.closeFilter = function() {
  $scope.modal.hide();
};

$scope.showFilter = function() {
  $scope.modal.show();
};

Any idea how to apply transtions to modals?

Upvotes: 11

Views: 576

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 16660

You don't need to specifically use ionic-native-transition in order to use animation with modal. Just pass the animation property value to object passed to $ionicModal.fromTemplateUrl as below:

function LoadFilter(){
  $ionicModal.fromTemplateUrl('templates/filter.html', {
    scope: $scope,
    animation: 'slide-in-up'
   }).then(function(modal) {
     $scope.modal = modal;
     $scope.modal.show();
   });

   $scope.closeFilter = function() {
     $scope.modal.hide();
   };

   $scope.showFilter = function() {
     $scope.modal.show();
   };
}

Upvotes: 1

xelilof
xelilof

Reputation: 456

............

You can easily call your transition right before opening the modal:

window.plugins.nativepagetransitions.slide(options, transitionSuccess, transitionError)

and call this on modal opened:

window.plugins.nativepagetransitions.executePendingTransition();

..........

fix grabbed from the plugin provider git page

https://github.com/shprink/ionic-native-transitions/issues/89

hope this helps

Upvotes: 0

Related Questions