How could I make a jump to another route with a page effect?

1 
For example, I clicked a link on the page which will jump to another route, but before the jump, I wanna some page effects such as fadeIn or slideIn to be shown, and this jump doesn't need to prepare any model data, it's just a pure jump to another route. How could I realise this? Thanks.
2

Hi,

have a look at https://github.com/billysbilling/ember-animated-outlet

Ben

3 
That's really coooooooooool~ Thank u so much :)
4

I tried this lib on Chrome with version 34.0.1847.137 m and Firefox with version 29.0.1 on my pc, but it’s of no use :frowning: I can’t see any animation effect. Is this lib only for mobile app?

5

Did you try the demo http://ember-animated-outlet-demo.herokuapp.com?

it works for me in latest chrome / firefox. i don´t use the lib myself.

Ben

6 
Yes, I tried the demo site and I saw the effect, but I used the code following the api and can't see the effect on my pc :(
7

Give https://github.com/gigafied/ember-animate a try as well. I’ve found that you have to create something like this to best leverage the animation behavior properly.

http://emberjs.jsbin.com/towil/17/edit?css,js,output

2 Likes
8

Thanks :slight_smile: I’ll take a look at it

9

The jsbin demo does this weird blink when you click the link, then it slides in the colored view. Seems like a bug?

10

With ember-animated-outlet you have to define a view for all of your controllers that you want to transition. If you don’t, it throws an error in console and you won’t see the transition. Also make sure you are using the link-to-animated helper or method and not the norman link-to

11

Got it ~ Thanks for you help!