Modal Animations

ionic-v1
1

Hello,

Just a quick note as this is my first post here. I’ve been playing with this awesome framework for the last 48 hours and I really love it. I’m building and application prototype with it to see if it’s good for our needs!

Here’s the question:

I’ve got the modal working with animation slide-in-up, it looks really good. I would like to have a fade-in modal. I’ve tried both fadeIn and fade-in.

Is it possible to have a modal fade in? Is there a list of available animations somewhere, I pretty much made my own list from the CSS but maybe I missed something in the documentation.

Thank you,
Michael

2

This is actually a fair question, other animation options listed in ionic.css aren’t applied to the modal.

For example, this does not work:

  // Create our modal
  Modal.fromTemplateUrl('new-task.html', function(modal) {
    $scope.taskModal = modal;
  }, {
      scope: $scope,
      **animation: 'fade-in'**
  });

But if you change animation to ‘slide-in-up’ that works, which is the default animation.

1 Like
3

Hey guys, this is something we definitely need to expand on. It’s currently possible to do this, but the way the animations work with Angular, the slide-in-up is the only built in one that Angular’s ngAnimate works correctly with. I’ll put this on the list of things to expand on, but if you copy the format of slide-in-up including the keyframe animations and the slide-in-up-add and remove, it would work fine.

4

Hi guys,

also interested in new animations like “slide-left-right-ios7” on modal views. This would be awesome for my “fancy select” directive that open a list of items within an ionic modal view. BTW, even if it’s a really small piece of code, I can share it if someone is interested.

Hakan.

5

Any news here? It’s been a very long time. Would be nice to fix us some eye candy :wink:

6

Just a note for anyone looking this answer up: I found that I was able to apply other animations for modals by following this style:

  // Create our modal
  Modal.fromTemplateUrl('your-template.html', function(modal) {
        $scope.taskModal = modal;
  }, {
        scope: $scope,
        animation: 'slide-in-right'
  });

In my case, I used “slide-in-right” to get precisely the animation I was looking for. :smile:

2 Likes
7

Many happy returns for the festive season to everyone :smile:

Has anyone had any more luck with this? I’d like to use modals in 2 different ways in my app and would like different animations for the different use cases.

I tried slide-in-right as recommended by @auginator but the result was no animation at all for the modal (tested in browser, Chrome to be specific).

Happy holidays :slight_smile:

2 Likes
8

I get the same result as you: no animation when using slide-in-right.

2 Likes
9

The only animation class defined in the the ionic css for this is “slide-in-up”. It’s easy enough to implement your own animations for modal animations in your app’s css file. Here’s an example of a zooming effect I have used for modals (without vendor prefixes for simplicity):

//Scale-In Animation
.scale-in {
  transform: scale(0.9);
  opacity: 0;
}
.scale-in.ng-enter,
.scale-in > .ng-enter {
  transition: all cubic-bezier(.1, .7, .1, 1) 400ms;
}

.scale-in.ng-enter-active,
.scale-in > .ng-enter-active {
  transform: scale(1);
  opacity: 1;
}

.scale-in.ng-leave,
.scale-in > .ng-leave {
  transition: all ease-in-out 250ms;
}
9 Likes
10

Works great on Desktop while testing but on mobile- animation is too fast to notice.
Looks more like ‘fade-in’ on mobile.

11

I’ve added an issue about the closing animation in modals but it seems to be untouched since then:

The problem still occurs in the newest nightly beta14 build.

1 Like
12

Add -webkit-transform and -webkit-transition for Safari (hence iOS). Tested, works on simulator.
Also you’d need to add -ms-transform for WindowsPhone.

.scale-in {
	-webkit-transform: scale(0.0);
  	transform: scale(0.0);
  	opacity: 0;
}
.scale-in.ng-enter,
.scale-in > .ng-enter {
	-webkit-transition: all cubic-bezier(.1, .7, .1, 1) 400ms;
 	transition: all cubic-bezier(.1, .7, .1, 1) 400ms;
}

.scale-in.ng-enter-active,
.scale-in > .ng-enter-active {
	-webkit-transform: scale(1);
 	transform: scale(1);
	opacity: 1;
}

.scale-in.ng-leave,
.scale-in > .ng-leave {
	-webkit-transition: all ease-in-out 250ms;
 	transition: all ease-in-out 250ms;
}
4 Likes
13

Any updates? It would be very helpful if there is a way to do it.

14

slide-in-right animation for modal.

3 Likes
15

Nice one ! It’s very smooth.

16

inspired and learning about .ng-leave by you I thought it’d be easy to just use animate css and achieve the same with many other modal transitions.
You can check the demo and description here for animated modals…Let me know your thoughts on improving it. Feel free to open an issue on github

6 Likes
17

Works great, thank you !

18

In my test, if you want a transition to look like Android transition. i changed de scale for

-webkit-transform: scale(0.7);
transform: scale(0.7);

It would be great to find a way to make this transition for page view transition for Android on Ionic 1