Same page appears while using ionic native transition plugin? - ionic-framework

Question

I am using ionic native transition plugin in my app. I am using slide up transition for pages.It works,but when state changes it shows the same page for a short period of time and then the other page (the page where I want to switch) appears. Here is the github link.I tried with different values for the default options, but it doesn't solve my problem. any help will be appreciated

Answer 1

I'm not sure if your issue is the same that I had (when transition to next/previous state begins the "new state" which it's supposed to transition to is shown in the "old view" before/during animation) but here is what I did. I found a solution which is to add a timeout to the state change in the stateGo() function in the ionic.native-transitions(.min).js which leads to it being run as the last function. The following code works on both iOS and Android devices.
function stateGo() {
var state = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0];
var stateParams = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
var transitionOptions = arguments.length <= 2 || arguments[2] === undefined ? null : arguments[2];
var stateOptions = arguments.length <= 3 || arguments[3] === undefined ? {} : arguments[3];
if (!state) {
$log.debug('[native transition] cannot change state without a state...');
return;
}
unregisterToStateChangeStartEvent();
transition(transitionOptions);
if (ionic.Platform.isIOS()) {
$timeout(function() {
$state.go(state, stateParams, stateOptions);
});
} else {
$state.go(state, stateParams, stateOptions);
}
}
I decided to add the check for an iOS device and run the timeout only in that case because it was only occurring in iOS devices and the timeout perhaps made Android devices flicker a little on the transition (I could be paranoid and this not really even occurring, or is due to large images on the content on my app).
Same fix probably also works in the case that you are using locationurl instead in which case you just set timeout to the "$location.url(url);" function.
Not sure if this would be the final solution for this problem but it works for now and hopefully the plugin will be fixed soon so this problem won't bother anyone else.

Answer 2

The same issue was on my side as well when using:
$scope.$on('$ionicView.enter', function(event, viewData) {
var transitionDirection = viewData.direction !== "back" ? "left": "right";
var options = {
"direction": transitionDirection,
"duration": 600,
"androiddelay": 75
};
window.plugins.nativepagetransitions.slide(
options,
function () {},
function () {}
);
});
However, when I changed the '$ionicView.enter' event to '$ionicView.beforeEnter', it solved the case for me. Not sure if that is a proper solution though.