Any chance you can further document the installation process for those who are unfamiliar with webpack?

For example if this is the series of animation I go through when enter to next page:
slide right, slide right, slide up, fade in

Then, if now I continuously hit the back button, it would be:
fade out, slide down, slide left, slide left

From #25

I nedd a way to know that the transition ended.

All $state (like $stateChangeSuccess) and view (like $ionicView.enter) events are fire before transition begin.

Hi, there's a way to remove the 'blinking' when transition starts?
I'm already using $ionicConfigProvider.views.transition('none'); to disable ionic default transitions.

Versions used:
Telerik Native Transitions Plugin @ is 0.4.3
ionic-native-transitions @ 1.0.0-beta5

(and when I set $ionicNativeTransitionsProvider.setOptions, the app does not load)

When using native transition, I always face the following issue:

• Different page content will have different load time
• Different model of smartphone will have different load time based on it's performance
• Background running app on user device may cause unexpected slow load of a page causing improper transition animation (animate too early)

Therefore, it is the trouble of animation to be animated too early (where same page slide in, only then change to next page). Or, animated too late (the delay is properly set for low end device, but it will be too slow for high end performance device).

It would be great & super cool if your plugin can help to avoid or reduce this issue.

Guys, I have released v1.0.0-rc1 with your requested features:

• Success/Error events
• Change page programatically (stateGo, locationUrl functions)
• Change page with directives
• Enable/Disable as a service
• Enable/Disable ionic transitions

Can you check if it is all good for you? If I do not have negative feedback I will release v1.0.0 :)

@hlehmann @leobetosouza @mabdelfattah @NgYueHong

PS: Do not forget to use the telerik plugin v.0.5.4

Hi ! Very nice work ! I am wandering if it is possible to detect when $ionicHistory.nextViewOptions({disableAnimate: true}); is use to disable native animation.

Consider the following scenario:

1. User leaves the state, either by going back or to another state.
2. To confirm state change, I call preventDefault on $stateChangeStart event.
3. Continue state change after confirmation.

I guess there's a issue with ionic-native-transitions because after event's prevented, the screen gets stuck until executePendingTransition is called manually. At least this is what I get on iOS 9.1 with platform 3.9.2 and cordova-plugin-wkwebview.

If you want to overwrite the default android back button behaviour and do something like

$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);

With ionic-native-transitions enablet It goes back normally, ignoring completely the preventdefault event.

I don't know if it come from you plugin or telerik, but when I do a slide transition on iOS, it flash white juste before starting sliding when slide left with delay set to -1. slide right seem to be ok.

I've also revert direction, default transition slide right instead of left and default back transition to left instead of right (just in case it was my code), believe me, slide left flicker again (even if it just go back) and slide right is perfect.
$ionicNativeTransitionsProvider.setDefaultTransition({
type: 'slide',
direction: 'right'
});
$ionicNativeTransitionsProvider.setDefaultBackTransition({
type: 'slide',
direction: 'left'
});

Tell me I'm not alone to encounter this issue ^^'

Hi,

Firstly, I wasn't familiar with Browsify (ie to do the require ES5). I'm building an Ionic app.

I so to get it working, I just added the "/ionic-native-transitions/dist/ionic-native-transitions.js" script to my index.html file (I had to load it after ionic.bundle.js).

In modules I added:
angular.module('stashd', ['ionic-native-transitions',])

And below that I added:

.config(function($ionicNativeTransitionsProvider){ $ionicNativeTransitionsProvider.setDefaultOptions({ duration: 400, // in milliseconds (ms), default 400, slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4 iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1 androiddelay: -1, // same as above but for Android, default -1 winphonedelay: -1, // same as above but for Windows Phone, default -1, fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android) fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android) triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back }); });

NB: I had to add a comma fo "fixedPixelsBottom: 0,"- that's a Syntax error.

Then added a transition to routing (a sample):
.state('stores', { url: '/stores', nativeTransitions: { "type": "flip", "direction": "up" }, views: { 'menuContent': { templateUrl: 'app/components/stores/stores.html' } }

ionic serve works, but in the JS console it says "nativepagetransitions is disabled or nativepagetransitions plugin is not present".

When I build the app (ios) xcode does not load the content of the app (aside from the header).

Can some one please guide me?

Most of our navigation are inside controllers using $location.url().... So how can we use this plugin inside controllers?

Thanks a lot for your work! This incredible plugint seems to work well for most of the users but not for me...

1/ I've installed the lib in my project with bower install shprink/ionic-native-transitions --save
2/ Included <script src="lib/ionic-native-transitions/dist/ionic-native-transitions.js"></script> in my index.html file
3/ Included the require in my routes.js file

=> No error on run but I see no change compare to normal transition. What am I missing??

Below is my code for routes.js

angular.module('app.routes', ['ionic-native-transitions'])

  .config(function ($ionicNativeTransitionsProvider, $stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js

    $ionicNativeTransitionsProvider.setDefaultOptions({
      duration: 500,
      // backInOppositeDirection: true
    });

    $ionicNativeTransitionsProvider.setDefaultTransition({
      type: 'flip',
      direction: 'left'
    });

    $ionicNativeTransitionsProvider.setDefaultBackTransition({
      type: 'slide',
      direction: 'right'
    });

    $ionicNativeTransitionsProvider.enable(true);

    $ionicConfigProvider.tabs.position('top');

    $stateProvider



      .state('login', {
        url: '/login ',
        nativeTransitions: null,
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      })


      .state('tabMenu', {
        url: '/tabMenu',
        abstract: true,
        templateUrl: 'templates/tabMenu.html'
      })


      .state('tabMenu.match', {
        url: '/match',
        views: {
          'tab10': {
            templateUrl: 'templates/match.html',
            controller: 'matchCtrl'
          }
        }
      })

I have an issue when using AdMobs and Native Transitions.
For the first page, all work fine.

But when i change page, the ad go to the top of the screen, the previous page is in the center of the page, and the new page is behind the previous page (crazy !!)

I use beta6 version with Telerik plugin 0.53 (tried other versions too). Default transitions are set correctly (checked other types of animation), but transition starts immediately in any case. Tested on android 5.1 devices and 4.2.

.config(function($ionicNativeTransitionsProvider){
    $ionicNativeTransitionsProvider.setDefaultTransition({
      type: 'slide',
      direction: 'left'
    });
    $ionicNativeTransitionsProvider.setDefaultBackTransition({
      type: 'slide',
      direction: 'right'
    });
    $ionicNativeTransitionsProvider.setDefaultOptions({
      androiddelay: 3000
    });
})

native-transition-options-android & native-transition-options-ios & native-transition-options-windows

Followed all the tutorials, but I keep getting the error:

"nativepagetransitions is disabled or nativepagetransitions plugin is not present"

Some help?

When there is no back view, hardware back button should close app, but instead it does nothing. I think problem is this piece of code

if (!$ionicHistory.backView()) {
return;
}

I tried to put ionic.Platform.exitApp(); instead of return, it does close the app but it's still in memory, so when I try to open it back it causes "White Screen of Death" but that is probably whole different problem.

There is a way to make this work?

It`s very weird swiping back and the new view enter from the wrong side.

enhancement?

Hey there,

Love this plugin, but for tabs - there isn't an need for native Transitions - so is there a way to disable transitions for certain links, but enabling it for everything?

Also - for Swipe back, is there a way to simply disable the Native Transition and go back to the old Ionic swipe back?

When Ionic page transition animation is disabled via $ionicConfigProvider.views.transition('none'), the view event like $ionicView.afterEnter will not executes accurately. You can clearly see the problem when you test on low end budget device. This brings the problem of same page being animate in, even if you try to animate it with afterLeave.

I have report the issue to ionic (ionic-team/ionic-framework#4555), but I don't hope to see any action taken for it soon. So, for now the only way is to avoid disable animation using $ionicConfigProvider.views.transition('none'). The downside is we will have a small delay on page transition that we need to wait for ionic animation to finish, only then animate ours. Or you have any idea of alternative way to disable ionic animation or speed up the animation to make it extreme fast like almost no transition?

being able to slide between views to mimic ionic slidebox

App crashes(shows alert message 'unfortunately application has stopped) with crosswalk web view.
(works fine without crosswalk plugin).

Thank U

Hi,
Trying to pass background color to flip transition Telerik-Verified-Plugins/NativePageTransitions#84

I set default options:
$ionicNativeTransitionsProvider.setDefaultOptions({
'backgroundColor' : "#585F5F"
});

but log is showing it is not passed in to transition:

[native transition]{"direction":"left"}

I updated to beta5, and removed all of the native-transition directives in the markup. I'm having trouble controlling when the native transition happens.

For example, it works on my post list at first. But if I click to another state, then go back, it stops using native transitions.

I don't want native transitions when a menu item is clicked, so I added this:

.state('app', {
url: "/app",
abstract: true,
template: require("./templates/menu.html"),
nativeTransitions: null,
controller: 'AppCtrl'
})

That didn't work, it still uses the transition.

My config file looks like this:

$ionicNativeTransitionsProvider.setDefaultOptions({
"duration"          : 300,
"androiddelay"      : 100, // Longer delay better for older androids
// "fixedPixelsTop"    : 64, // looks OK on iOS
});

$ionicNativeTransitionsProvider.setDefaultTransition({
  type: 'slide',
  direction: 'left'
});

$ionicNativeTransitionsProvider.setDefaultBackTransition({
  type: 'slide',
  direction: 'right'
});

Hi All.

It seems that when you run this plugin within UIWebView on iOS the nav bar text and buttons are not present in the screenshot. Everything runs great on Android.

Please see the video here:
https://youtu.be/dq2EDXVUrAI

In my case I cannot move to WKWebView due to CORS issues... and a great deal of the userbase is still stuck on iOS 8 due to being corporate devices.

Keen to help debug this if someone can point me in the right direction?

So im using tabs, in iOS the tabs are on the bottom and in android on the top.

How can i set these per platform?

Transitions seem to work great, but there's a flashing/flickering of the old view after the animation. I haven't seen this mentioned anywhere...is this a known issue?

Or perhaps I'm doing something wrong. This is running on a phsyical Nexus 6 with 5.1. All I did was include the plug-in and set some defaults (I tried lots of duration and androiddelay and slowdownfactor combinations too):

.config(function($ionicNativeTransitionsProvider){
    $ionicNativeTransitionsProvider.setDefaultOptions({
        "duration"          : 200,
        "androiddelay"      : -1, // Longer delay better for older androids
    });
})

Video:

Is it possible to use Enable/Disable in a service instead of a provider ?

Back button using ion-nav-back-button is working properly except for hardware back button. For example, when I transition to another state, the screen swipe to the left, when I click ion-nav-back-button, the screen swipes to the right, but when I click the hardware's back button, it still swipe to the left ( supposed to be to the right like the ion-nav-back-button).

Please add bower support. Thanks.

Is it possible to use the transitions from the $state.go() method?
In case its possible, can you add an example?

i have the following

<ion-nav-bar class="bar-stable" ng-controller="MainController">
        <ion-nav-back-button native-back class="button-clear ion-chevron-left" ng-click="mainGoBack()">&nbsp;Back</ion-nav-back-button>
    </ion-nav-bar>

$ionicNativeTransitionsProvider.setDefaultTransition({
        type: 'slide',
        direction: 'left'
    });

    $ionicNativeTransitionsProvider.setDefaultBackTransition({
        type: 'slide',
        direction: 'right'
    });

Clicking on the back button will still animate to the left and not right

When I add nativeTransitions in routes like this;

nativeTransitions: {
"type": "slide",
"direction": "left"
},

It works just one time on Android device

The application crash when androiddelay is set to -1 and we attempt to make a transition other than "slide". In my case it was fade, mut I've tried flip and it crash too.

Here is the copy-paste from logcat:
10-19 16:19:11.293 22071-22071/? E/AndroidRuntime﹕ FATAL EXCEPTION: main
Process: com.compagny.test, PID: 22071
java.lang.IllegalArgumentException: delay < 0: -1
at java.util.Timer.schedule(Timer.java:454)
at com.telerik.plugins.nativepagetransitions.NativePageTransitions.doFadeTransition(NativePageTransitions.java:312)
at com.telerik.plugins.nativepagetransitions.NativePageTransitions.access$1700(NativePageTransitions.java:27)
at com.telerik.plugins.nativepagetransitions.NativePageTransitions$3.run(NativePageTransitions.java:275)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

It only append with delay to -1. At 0 or > it doesn't crash.

Have a nice day!
:)

Bower install no longer provides minified file.

Hi, when I run this command npm install ionic-native-transitions --save the prompt gives me this feedback:

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "ionic-native-transitions" "--save"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.1

I'm using Windows 10, and the installing process works with others packages.
I've been able to install using bower, but I can't understand the origin of this issue.

Hi! I'm trying to figure out how to implement these screen transitions in a side menu based app, but the documentation is not clear about it. Is this feature planned?

Hi all !
I install this ionic-native-transitions plugin to my inoic project,
but I get inject module error when I try to configure angular module:
Error: [$injector:nomod] Module 'ionic-native-transitions' is not available! You either misspelled the module name or forgot to load it.

configuration code:
angular.module('houseApp', ['ionic-native-transitions']);

can anyone help me?

Hi
When linking another with stateParams, i get an error like:
"Could not resolve 'state.name({param1: data1, param2: data2})' from state 'someState'"

The transition works well without the stateParams.

tested it with the ui-router directive ui-sref attribute with stateParams and it works well as expected.
Is it possible to pass stateParams using the native-ui-sref directive?

From #25

Samsung S5, not using crosswalk, 0.5.4 of npm telerik plugin

-1 delay is working great but when moving 'back', the transition is immediate without waiting for page to load, so the same page starts transitioning before flicking over to the new page. Not sure if it is this plugin or telerik plugin issue.

Hi man, please test the transition with the side menu... Is neccesary first close the menu and after make the transition.

Thanks in advance

I did below 3 steps

1. ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.5.5

2. angular.module('yourApp', [
   'ionic-native-transitions'
   ]);

3. .config(function($ionicNativeTransitionsProvider){
   $ionicNativeTransitionsProvider.setDefaultTransition({
   type: 'slide',
   direction: 'left'
   });
   });

and now i am getting error

$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module ionic-native-transitions due to:
[$injector:nomod] Module 'ionic-native-transitions' is not available!

Plugin has been installed successfully, when i list all plugins i see it in list.
What could have gone wrong ?

$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module ionic-native-transitions due to:
[$injector:nomod] Module 'ionic-native-transitions' is not available!

Solved, forget about it :)

The ionic-native-transitions.min.js is not updated.