Proper way to create custom transitions (i.e. up-down) in Beta 14


#1

Does anyone have any suggestions as to some proper ways to extend the transitions in BETA 14?

In my specific use-case, the majority of the app works wonderfully with the basic native transitions, but for one section I want to be able to navigate between ‘cards’ (views) by swiping up and down, sliding the cards up and down.

$ionicViewSwitcher seems like a great way to pick a custom transition for each gestural event that triggers the state change, but it doesn’t seem to be documented as a public API to use, is it recommended against? Am I missing something? Also, does anyone have any ideas for how to best extend the current transition css to create custom transitions? I seem to be having a hard time wrapping my head around how to approach this!

Any help would be much appreciated! Thanks in advance!

Nandan


#2

Right now the transitions are a bit of css and js so it’s a bit difficult to add custom animations at the moment.
We’re hoping as we expand these animations, we can allow people to start to customize them and add new ones.

But for a quick look at how a transition is built, check out the transitions.scss file

https://github.com/driftyco/ionic/blob/master/scss/_transitions.scss


#3

Cool - thanks!

I just learned that using $ionicViewSwitcher caused some interesting problems with the caching that I couldn’t quite make heads or tails of, while using $ionicHistory.nextViewOptions() for disabling animation worked without problem. Not sure if there’s a more proper way to set the direction of animation without using $ionicViewSwitcher?


#4

For a custom animation? If you only need it for one view, you can use the nav-direction directive.

http://ionicframework.com/docs/api/directive/navDirection/