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?
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.
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.
Ionic apps are truly cross-platform: able to run as an Android, iOS, Electron, and Progressive Web App (PWA), all from a single codebase.
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();
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With