Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 593
ChandrasekarG Avatar asked Apr 15 '16 06:04

ChandrasekarG


People also ask

What is native transition?

The Native Page Transitions plugin uses native hardware acceleration to animate your transitions between views. You have complete control over the type of transition, the duration, and direction.

How do you add an ionic model?

Create the Data Model With the constructor set up this way we can either create a new data model like this: new ChecklistModel('my checklist', itemsArray); Then we have our addItem and removeItem functions defined, which manipulate the items array for us.

What platforms does ionic support?

Ionic apps are truly cross-platform: able to run as an Android, iOS, Electron, and Progressive Web App (PWA), all from a single codebase.


1 Answers

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();
   };
}
like image 165
Aditya Singh Avatar answered Nov 03 '22 02:11

Aditya Singh