Slide-in-right animation for ionicModal


#1

I couldn’t find slide-in-right animation for ionicModal. So i create one on my own.

Usage:

animation: ‘slide-in-right’

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; }

Modal Animations
#2

pretty cool, will give this a try… i am more of a developer and not too good with animations, how would I change this to slide in from the bottom


#3

Use ‘slide-in-up’ instead of ‘slide-in-right’. That is the default animation for ionicModals.


#4

Nice, works perfectly!


#5

Awesome, Thanks guy!


#6

fantastic! thank you very much. works great


#7

I love you… thanks!


#8

well done! i love it and just copy paste it … works! :slight_smile: thanks


#9

nice one!!! Absolutely perfect


#10

it’s cool :slight_smile:
thank for a lot :cactus:


#11

Great, thanks for sharing this. It saved a good time!

Only a small change to use translate3d(100%, 0, 0) instead of translateX(100%)

It will trigger hardware acceleration in devices with it and will deliver a better performance.

The same code with this change:

.slide-in-right {
  -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }

.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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

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

#12

How do you use this in the modalController create method?