Hi Team,
After I upgraded to the latest release I am trying to figure out what is the correct way to animation between views. e.g. click from LIST - > to get to details, and back, etc…
As all the attributes animation where removed, even some of the http://learn.ionicframework.com articles are outdated when they refer to it so the question is : are the any details we can use in order to figure out how this transition between views should work in new 1.0.+?
Thanks for any feedback,
Frank
I use -> $ionicConfigProvider.views.transition(‘platform’);
See: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
And (in side-menu-template.html) I have tried:
<ion-nav-view name="menuContent" animation="no-animation"></ion-nav-view>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
<ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
None of which appeared to override the $ionicConfigProvider.views.transition() setting.
And:
$ionicModal.fromTemplateUrl('templates/login-template.html', {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
}).then(function(modal) {
$scope.loginModal = modal;
});
Which works.
See also:
Hi Robin,
Thanks for the reply. This is the thing most of the stuff were removed and it seem that all is driven by IonicConfigProvider.
I could replicate the css animation what were in older ionic.css, but I do not want to go this way. This is why I am looking for correct solution in 1.0.0+.
I think ionic guys should have some point of view on this, when they refactor and removed all the animation so I guess ways to go are:
Thanks,
-FK
Its ‘Rob’ - ‘Robinyo’ is my Brazilian soccer name (http://anu.co.uk/brazil/) 
-> Thanks for the reply. This is the thing most of the stuff were removed and it seem that all is driven by IonicConfigProvider.
Yes, it looks that way.
-> I could replicate the css animation what were in older ionic.css, but I do not want to go this way. This is why I am looking for correct solution in 1.0.0+.
I think you might have to, at least for the time being (the Ionic framework has 318 open issues and 87 open pull requests).
Take a look at:
I just figured out partially my problem why view does not animate by default the key function inside ionic bundle is this at the bottom.
It accept direction and allowAnimate. But it will animate only if direction is back or forward. So my detail view when coming back to the list now animates as I added direction to it
<button class="button button-positive icon-left ion-ios-arrow-left button-clear"
nav-direction="back"
ui-sref="app.sidemenu.list"></button>
What I still can’t figure out is how pass to my list composed using collection repeat the nav-direction so when going to the detail list it will have direction = forward
<ion-item class="item beach-card"
collection-repeat="item in items"
item-width="getItemWidth()"
item-height="getItemHeight()"
item-render-buffer="10"
nav-direction="forward"
ui-sref="app.detail({detId: item.identity})">
When I debug this transition the direction for this is set as none, therefore animation does not kick in.
Doe anybody knows how to put in direction? simply adding this as another attribute above the ui-sref does not work for me. Thanks.
transition: function(direction, enableBack, allowAnimate) {
var deferred;
var enteringData = getTransitionData(viewLocals, enteringEle, direction, enteringView);
var leavingData = extend(extend({}, enteringData), getViewData(leavingView));
enteringData.transitionId = leavingData.transitionId = transitionId;
enteringData.fromCache = !!alreadyInDom;
enteringData.enableBack = !!enableBack;
enteringData.renderStart = renderStart;
enteringData.renderEnd = renderEnd;
cachedAttr(enteringEle.parent(), 'nav-view-transition', enteringData.transition);
cachedAttr(enteringEle.parent(), 'nav-view-direction', enteringData.direction);
// cancel any previous transition complete fallbacks
$timeout.cancel(enteringEle.data(DATA_FALLBACK_TIMER));
// get the transition ready and see if it'll animate
var transitionFn = $ionicConfig.transitions.views[enteringData.transition] || $ionicConfig.transitions.views.none;
var viewTransition = transitionFn(enteringEle, leavingEle, enteringData.direction,
enteringData.shouldAnimate && allowAnimate && renderEnd);
if (viewTransition.shouldAnimate) {
// attach transitionend events (and fallback timer)
enteringEle.on(TRANSITIONEND_EVENT, completeOnTransitionEnd);
enteringEle.data(DATA_FALLBACK_TIMER, $timeout(transitionComplete, defaultTimeout));
$ionicClickBlock.show(defaultTimeout);
}Update
The only way that I made so far animation work when going from LIST to detail is
$ionicViewSwitcher.nextDirection(‘forward’);
But I wonder if there is any elegant way doing this using directive (attribute) ?
OK, so I started out with the side-menu starter template.
And, I use a master/detail pattern:
Master state: ‘app.main’ which displays a list of posts:
.state('app.main', {
url: '/main',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/main-template.html',
controller: 'MainController',
resolve: {
posts: function(PostsService) {
return PostsService.findPosts();
}
}
}
}
})
And, the detail state: ‘app.preview’ which displays a post:
.state('app.preview', {
url: '/preview/{postId}',
views: {
'menuContent': {
templateUrl: 'templates/preview-template.html',
controller: 'PreviewController',
resolve: {
post: function($stateParams, PostsService) {
return PostsService.findPostById($stateParams.postId);
}
}
}
}
})
In my apps.js:
$ionicConfigProvider.views.transition('platform'); // platform, ios, android, none
In my side-menu-templates.html:
<ion-nav-view name="menuContent"></ion-nav-view>
And, thats all I need to do to have the transitions (the named view’s which get inserted in ‘menuContent’ ) between states animate as per the config provider setting (e.g., slide from right to left on ios).
So my detail view when coming back to the list now animates as I added direction to it
<button class="button button-positive icon-left ion-ios-arrow-left button-clear" nav-direction="back" ui-sref="app.sidemenu.list"></button>
You don’t need to add a ‘button’ to the (I assume) ‘ion-nav-bar’ in your detail view.
You configure the ‘ion-nav-bar’ in your side-menu template and ‘< Back’ will appear on the detail view:
...
<ion-nav-bar class="bar-dark">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="primary">
<button class="button button-icon button-clear ion-navicon" menu-toggle="primary"></button>
</ion-nav-buttons>
</ion-nav-bar>
...
And, any animation should just work.
See: https://github.com/Robinyo/Vardyger/tree/master/core/client/app/templates
Thanks Robin, for your activity in this thread, I need to look at yours what could be the differences.
Since I migrated to 1,0.0+ I am still fine tuning some incompatibility here and there and animation was one of them.
And even I made it work but now its better to look at yours as I should not set extra nav-direction and other nor $ionicViewSwitcher except this provider. All should animate out of box.
But at least it helped me to look into this.
See: “Animation for Ionic Apps” -> http://robferguson.org/2015/07/31/animation-for-ionic-apps/
This is awesome I need to try this out. Thanks again.
Hey btw. what is your rate 
?
I am pretty curious when Mike @mhartington or anybody from the ionic team is able to demonstrate in such way $ionicAnimation.
Because I think we have this powerful service in the Library I haven’t seen single practical example of its usage. Like e.g. animation items added to the list.
And I think its a pity what do you think ?
Thanks,
-FK
Actually, if you check the references section at the bottom of the post: http://robferguson.org/2015/07/31/animation-for-ionic-apps/ you’ll see a reference to a forum response from @mhartington where he provided a Codepen:
http://codepen.io/mhartington/pen/QwGRpr
Right. What I was saying is to demonstrate the $ionicAnimation service , since we have it in the LIB - ionic LIB
Ionic Animation is no longer part of the ionic core. We use our own private animation service inside ionic, with no public api. There for if you want any animations, you can use ngFX or ng-animate.
