Skip to content
Add Custom Transitions to Ionic Modals.
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Latest commit 8720ec0 Mar 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src typo correction Mar 7, 2018
.editorconfig initial commit Mar 7, 2018
.gitignore initial commit Mar 7, 2018
README.md Update README.md Mar 20, 2018
_config.yml Set theme jekyll-theme-cayman Mar 7, 2018
ionic.config.json initial commit Mar 7, 2018
package-lock.json initial commit Mar 7, 2018
package.json initial commit Mar 7, 2018
tsconfig.json initial commit Mar 7, 2018
tslint.json initial commit Mar 7, 2018

README.md

ionic-modal-custom-transitions

Adding Custom Transitions to Ionic Modals

Ionic – Adding Custom Transitions to Modals

Demo

Transitions and Usage

All transitions classes are located under transitions folder. These are the available Transition classes:

  • modal-translate-up-enter
  • modal-translate-up-leave
  • modal-scale-up-enter
  • modal-scale-up-leave

You can use existing transition classes like this when you create a modal:

var modal = this.modalCtrl.create(SampleModalPage, {}, {
  enterAnimation: '<ENTER TRANSITION CLASS NAME>',
  leaveAnimation: '<LEAVE TRANSITION CLASS NAME>'
});

Find complete details on how to use it in our blog article on how to use it here: Ionic Modal Custom Transitions.

You can’t perform that action at this time.