I want to use your plugin but I am not sure what it does.

When I am on page /index.html and I do:

window.plugins.nativepagetransitions.slide({
    // the defaults for direction, duration, etc are all fine
    "href" : "index.html#sometoken=1234"
});

What does your plugin? Does it make a reload of the page index.html#sometoken=1234or does it do the same as if I would make an ajax page reload? This is very important because I do not want to have a reload every time I open a new sub page of my PhoneGap application. This would trigger the initialization on every page.

Hi,

I am trying to slide between div's with id's in my multipage single-file app. This works fine on Android, but iOS keeps sliding to the same page as I'm already at.

The div's are each placed with css code like this:
left: 0%; - left: 100%; - left: 200%; ......

I am doing the page slide like this:
window.plugins.nativepagetransitions.slide({"href":"#"+divId});

The overflow css property on "body" is set to either "scroll" or "auto". Am I using the plugin the wrong way, or did I miss something obvious?

Btw. I'm using version 0.2.1 - that's the one available on PhoneGap Build right now.

Hi, I'm not sure if it's a feature or a bug :-), but during the left slide transition on iOS (8.1), the slide coming from the right is transparent and fade in at the end of the animation. On Android the slide is solid, without a transparency. On slide right on both platforms a slide is without a transparency.

In the debug console of Xcode, the following warnings appear when transitions are fired:

THREAD WARNING: ['NativePageTransitions'] took '97.010986' ms. Plugin should use a background thread.

Running iOS 8.3 and Xcode 6.3.1.

Not sure if this is of consequence, but it does seem to have some effect on performance.

Any thoughts on this?

We are currently using the slide transition for IOS and Android. It works perfectly on IOS and Android v4.4.2, but when testing on v4.4.4, the plugin is unable to take a screenshot of the webview before it slides. Here is a sample of the code:

p.options = {
"direction" : "left",
"duration" : 500,
"slowdownfactor" : 4,
"iosdelay" : 100,
"androiddelay" : 300,
"winphonedelay" : 250,
};

window.plugins.nativepagetransitions.slide(
this.options,
function (msg) {console.log("success: " + msg)}, // called when the animation has finished
function (msg) {console.log("error: " + msg)} // called in case you pass in weird values
);

Has anyone hit this same problem? Any help would be greatly appreciated!

I'm working on a Phonegap/Cordova app (AngularJS is used to update the views) and would like to use the curl transition to show a hidden menu. All the other transition work as expected, but when I use the curl transition nothing happens. The view gets updated without the transitions. Any ideas why? I'm testing on an iPhone 6 Plus.

I have tried everything to get this to work with cross walk and all the code i implement just spits back a black bitmap object.

Cross walk has a UiUtils.getScreenShot function but that doesn't work either.. so not sure exactly why android can't get getDrawingCache.. it doesn't even work with view.draw() or getPicture()..

Hi,

On iOS it seems to leave a black bar of roughly the same height as the native navigation bar we are using, is there a workaround for that issue?

Thanks

An option for setting drawer width as a percentage to screen width or as px.
A callback which is triggered after clicking the screenshot.

Those two options would be great. Setting a fixed right margin is not flexible on tablet layouts. Also beeing able to detect a tap on the screenshot provides more opportunities for the interaction.

If we change from #view1 to #view1 (the same), HTML5 frameworks intend to ignore this navigation rule. When adding something like #view?x=1 then navigation (and animation) should kick in.

Currently we boldly navigate to the same href. Let's just do nothing in this case as it's most likely a 'user error' which was never noticed because Kendo UI and friend iron these out for the developer.

hi @EddyVerbruggen or other developer
I am using PGB 3.6.3 with plugin 0.1.1 or 0.2.0
https://build.phonegap.com/plugins/1249

according to this
http://plugins.telerik.com/plugin/native-page-transitions

when I use 0.1.1 version，seem everything work perfect (android and ios)
but..
when I use 0.2.0 version，android work，wp not try yet，ios broken

no mater I use slide or flip or drawer
it will trigger the fail callback => file not found

hi @EddyVerbruggen
I am using 0.2.1 version with PGB 3.6.3 and iOS 8.1 (Android and WP all work perfect)
https://build.phonegap.com/plugins/1267

my code completely like yours
http://plugins.telerik.com/plugin/native-page-transitions

before animation
http://www.littlebau.com/20141122/01.PNG
after animation
http://www.littlebau.com/20141122/02.PNG

but finally I found a Temporary type of solution
it is use the 3rd status plugin
https://build.phonegap.com/plugins/715
https://github.com/apache/cordova-plugin-statusbar/blob/bdbaf129595c4a4e3d957a1bc218d05dc5f82a9e/README.md

and use these javascript code again

StatusBar.overlaysWebView(true);
StatusBar.overlaysWebView(false);

after it，the footer become normal again

I tried the Native Page Transitions plugin together with the Cordova Crosswalk Webview, but only the flip transition seems to work. For slide and fade I have to click twice to get the transition. But then also the flip start flickering. Is there any solution?

It would be great if you could also support a fade transition.

Hi,

I recently tried to use this plugin in a Crosswalk app, and it didn't go well...

Crosswalk is replacing Android's crappy webview with a Chromium one, and the issue may come from here. Do you think there is a solution to make it compatible?

Here is the relevant ouput :

-compile:
    [javac] Compiling 20 source files to /project/bin/classes
    [javac] warning: [options] source value 1.5 is obsolete and will be removed in a future release
    [javac] warning: [options] target value 1.5 is obsolete and will be removed in a future release
    [javac] warning: [options] To suppress warnings about obsolete options, use -Xlint:-options.
    [javac] /project/src/com/telerik/plugins/nativepagetransitions/NativePageTransitions.java:48: error: method does not override or implement a method from a supertype
    [javac]     @Override
    [javac]     ^
    [javac] /project/src/com/telerik/plugins/nativepagetransitions/NativePageTransitions.java:50: error: cannot find symbol
    [javac]       super.onPageFinished(view, url);
    [javac]            ^
    [javac]   symbol: method onPageFinished(WebView,String)
    [javac] Note: Some input files use or override a deprecated API.
    [javac] Note: Recompile with -Xlint:deprecation for details.
    [javac] 2 errors
    [javac] 3 warnings

BUILD FAILED

We currently have a tab bar that positioned to the bottle of the. When navigate between pages, this plugin takes a screenshot of the page with the tab bar, and slides it out of view, and the places it right back when it's move from page to page. Is there anyway to keep this tab-bar out of view to act more like a native app (the header moves, but the tabbar doesn't move).

You mentioned in the code: TODO this can also be used for not scrolling fixed headers and footers, so I'm wondering what can be done to do this. Any suggestions?

Greg

window.plugins.nativepagetransitions is not available, so no native transitions will be applied NativePageTransitionsKendoAdapter.js:211

I have tried installing via the IDE using plugins marketplace and via import to plugin directory? It is as if something is missing- the appbuilder demo works fine

Hi,

I’ve seen something strange again after installing native transition plugin.
I’m not sure that it’s a bug, plugin limitation or my wrong implementation.
My app is a content based news app. Before installing the plugin I’ve checked posts many times and I haven’t any AJAX request fail. I can say that I’ve gone back and forth between first page and detail post page of the app for more 100 times in a row without failing a single request but after installing the plugin around 1/10 of request going to fail. Sometimes 3 successive request fails in a row. I’m using this function for handling errors:

error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.n' + jqXHR.responseText);
            }
        }

The error code for failed request is the first one (status 0) but Im sure that my connection is ok. The AJAX spinner will spin forever. I think the server has a timeout for a request and after certain amount of time the server will send timeout error but for my case it seems that some AJAX request doesn’t go out of the device.
this behavior is not limited to kitkat. I've also tested the app of 4.1 and 4.2. when the delay between two request is less than 10 seconds, these failed requests will happen more frequent.
Do you have any idea for this problem or can I do anything to reproduce this condition for you to see it?
Thanks a lot.

Hi,

I've implemented this plugin in my app and its working like a charm. Transitions are very smooth and beautiful by something strange will happen in the destination page 2 seconds after transition.
Around two seconds after transition there is a page glitch. If I scroll the page that glitch will happen again. And if I scroll the page again, the glitches will happen again and again and again.
I've recorded the screen and you can see the movie here:

http://greenrobot.ir/kitkat.mp4

I'm using jQuery mobile 1.4.2 and the last version of Cordova.
Is there any way to stop these glitches? It's the only thing that stops me form using this plugin.

Thanks in advance

I´m trying to use this plugin in an app tha uses jaydata(sqlite provider) for database support, after navigating, database calls fails with the message, "database has been closed" .

On iOS works fine.

hi @EddyVerbruggen
I am using 0.2.1 version with PGB 3.6.3
https://build.phonegap.com/plugins/1267

my code completely like yours
http://plugins.telerik.com/plugin/native-page-transitions

when in WP8，all animation work perfect
but it will not trigger any success callback or fail callback
so...
is it normal ?

Hi, I came across with this plugin and I think that it has the means to solve one of the biggest issues of hybrid apps. The animations/transitions that is.
I am using Onsen UI (a framework such as Ionic - uses AngularJs) which has a lot of great things built-in (including transitions). But it would be even better if this plugin could be included as a default Cordova plugin (so UI frameworks wouldn't have to worry about animations and transitions and would build their logic on top of this plugin). If that's doable :)

Anyway, my issue is that right now I can pass an object from a page to the next one (It is supported through Onsen's navigation pattern). Using the plugin, I am able to make the transition but not to pass the object using a clean way. For instance what I do right now is this:

...
var options = {
        title: sight.title,
        description: sight.description,
        image: sight.image
        icon: sight.icon,
        latitude: sight.latitude,
        longitude: sight.longitude
    };
$scope.mynavigator.pushPage('next.html',options);
....

and later on the controller of next page I can retrieve the object like this:

...
var object = $scope.mynavigator.getCurrentPage();
$scope.title = object.options.title;
$scope.description = ...

Is a similar behavior supported?
Thanks in advance!

I get all sorts of errors related to CordovaWebView

when I use the "window.plugins.nativepagetransitions.drawer" method with open and close by "portrait" mode，everything look great (no mater left or right)
http://www.littlebau.com/20141101/01drawer.PNG

but if I use the "window.plugins.nativepagetransitions.drawer" method with open and close by "landscape" mode，it become so starnge (no mater left or right)
http://www.littlebau.com/20141101/02drawer.PNG =>open
http://www.littlebau.com/20141101/03drawer.PNG =>close

when I use this plugin
it will trigger success callback in Android and iOS correctly
in Android，the callback's "msg" is "OK"
but in iOS，the callback's "msg" is "null"

is it normal ?

Is it possible to have both Left & Right side drawers? I suppose you could swap out the content and slide in from either side based on which drawer the user is trying to open, but that seems kind of slow. Would it be possible to instantiate multiple drawers to use?

When including the statusbar plugin to make the top 20 px solid, the new view is placed underneath the statusbar.

Hi,

I found an issue while implementing the plugin in my app. Many thanks at first for this great plugin!

If you use the slide down or right, the transition works, but after it ends, the image is shown again. I have solved this issue by placing

bringToFront(webView);

at line 469.

Maybe you can implement this in the next release.

Best & thanks again
Stephan

Hi,
when using flip transition we have black background image. Is it possible to put some background image that would appear while flip animation is in progress? Something that could be defined in options like backgroundimage: '/res/images/logo.png'.
Keep up the good work. Native transitions are much smoother then anything that could be achieved with css3/javascript.

Trying to use this with React. Having a hard time getting the delays working correctly. Sometimes the old content is still visible. Seems dependent on the platform and general lag. Using href doesn't fix the issue.

It would be handy to have something like this:

nativepagetransitions.startSlide({...})

in the React view controller:

// This is like a "page is finished" event
componentDidMount: -> nativepagetransitions.end({})

That way we can 1. screenshot the current content, 2. listen for a "finish" event in whatever framework the end user has, then 2. swap the content out. The main idea is just to give that control to the user.

Maybe

nativepagetransitions.prepare({type: 'slide', ...});
nativepagetransitions.perform();

I see a comment in NativePageTransitionsKendoAdapter.js regarding drawer support. Any plans to implement this?

//TODO: auto-enhance drawers based on data-rel="drawer" & data-align="right"

I am using slide right and left for back and forward navigation but i am having and issue with the back transition, the template is updated, but the transition finishes only when i click on the screen.

'WebKit/WebKit.h' file not found

import <WebKit/WebKit.h>

Can you tell me which packages I need to install or what else I need to do?

thanks

The use of href is basically reimplementing template features from AngularJS. Is it possible not to reference .html file but templateUrl or just template? That way we can even pick Angular UI Router to work with this, especially the best practice is keep the state of the page.

I'd like to request an official Ionic adapter. I tried to build one until I realized I have no idea what I'm doing. This kind of works:

$rootScope.$on("$locationChangeStart", function(event, next) {
    event.preventDefault()'
    window.plugins.nativepagetransitions.flip({
        href: next
    });
});

Except it doesn't—quite possibly because of the problem described in #1. Anyways it would be nice if we had an official adapter.

If you specify the 'href' option with a path relative to parent (i.e.: '../index.html') or a path from root (i.e.: '/index.html') an error alert (file not found) is thrown. It's entirely possible to navigate to a sub-folder (i.e.: '/sub-folder/file.html') but not possible to navigate back up. Also, if you did happen to be in 'sub-folder/file.html' and provided a link to 'sub-folder/file-two.html' (i.e.: 'file-two.html') it would look for 'file-two.html' within the root folder.

I realise this is a bit of an edge-case as most folks will be using SPA frameworks, but I've got a couple of static file use-cases (docs, etc) where this behaviour is desirable (and it would be ideal to use NativePageTransitions).

I've tested this on both iOS and Android with the same results.

Trying to use this library for some understanding purpose. When I tried to do slide left transition on portrait mode view to landscape view, I'm seeing the black screen with cropped html content.

Its quite reproducible in actual device itself. Is there anything missing in configurations or code.? I assume its bug itself as i am using the default options.

I'm currently having the Cordova 4.3.0, ios 3.8.0 and nativepagetransition 0.2.14.

Hey @EddyVerbruggen,

I've found that my footer drops 20px on iOS when NativePageTransitions plugin (version 0.2.9) is used in combination with the org.apache.cordova.statusbar plugin (version 0.1.9). This .gif demonstrates the effect:

I created a (very) basic app to help reproduce the issue: https://github.com/blefebvre/cordova-native-transition-playground

The workaround detailed in #15 works as advertised. Since I'm loading a complete page in my sample, I simply added @bau720123's suggestion to my onDeviceReady callback: blefebvre/cordova-native-transition-playground@statusbar-workaround...master

Thanks for all your work on this plugin!

according to this
http://plugins.telerik.com/plugin/native-page-transitions

all animation in "portrait" mode no problem at all
but when in "landscape" mode，it will become so starnge (no mater any direction or what kind of animation type)
such like these screenshot
http://www.littlebau.com/20141101/02drawer.PNG
http://www.littlebau.com/20141101/03drawer.PNG

PS
above situation that only happen in iOS

I really love this project. Thanks so much for open sourcing it!

I would really like to see support for instantiating multiple drawers and/or native windows that you can use in your app. This would bring this plugin more in line with the implementation AppGyver uses in Steroids.

I would be willing to pay a significant bounty for this functionality as well if anyone wants to contribute a PR.

Hi,

Are you going to update your NativePageTransitions plugin at plugins.cordova.io ?
Pretty please.

Hey! I am using the plugin in a mobile app with Angular and UI-Router, sometimes i get this error and the app crash.

: CGImageCreate: invalid image size: 0 x 0.
: CGContextSaveGState: invalid context 0x17416eb80. This is a serious error. This application, or a library it uses, is using an invalid context and is thereby contributing to an overall degradation of system stability and reliability. This notice is a courtesy: please fix this problem. It will become a fatal error in an upcoming update.

Hi @EddyVerbruggen,

First of all, thanks a lot for this great plugin. We used it in one of our apps, and it really improved it!

Surprisingly though, there is one kind of animation that doesn't seem to be supported at the moment: modal. A workaround is to use a slide animation with a vertical direction, but it's not really the same as a modal view covering the current one.

Is it something difficult to implement? Because it would definitely add some more handsomeness to the plugin :)

as title
exception:

Are you guys planning on releasing support for the Drawer on Android? I found this while researching alternatives to AppGyver (which has native Android Drawer) and was disappointed to see that it was missing.

Hi, I'm building an application using Appbuilder (no Kendo UI) and I'm having problems with the page slide transition. I imported the Native Page Transitions plugin and the following code gives me problems:

function slidePageLeft(toTpl, toPage) {
    var template = window.document.getElementById(toTpl).innerHTML;
    var pageContent = Mustache.to_html(template, toPage);
    window.plugins.nativepagetransitions.slide({
        "direction"      : "right",    
        "duration"       : 200,        // in milliseconds (ms), default 400
        "slowdownfactor" : 3,          // overlap views (higher number is more) or no overlap (1), default 3
        "iosdelay"       : 50,         // ms to wait for the iOS webview to update before animation kicks in, default 50
        "androiddelay"   : 50,         // same as above but for Android, default 50
        "winphonedelay"  : 200,        // same as above but for Windows Phone, default 200
    });
    container.html(pageContent);
};

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
    // Function parameters are actually dynamically pulled
    // from a JSON database
    slidePageLeft("mainTpl","page1");
}

Couple of notes:

• Content updating is handled by Mustache (templating engine) and that's not the problem
• If I change the transition to flip everything works as expected so I do believe the problem is in the slide transition
• So far it only affects Samsung Galaxy Trend Plus (GT-S7580) running on Android 4.2.2 Jellybean, any other devices I tested everything works fine

Expected Result:

1. Tap hardware back button on Android OS.
2. App navigates to previous page/view with a slide transition.

Actual Result 1:

1. Tap hardware back button on Android OS.
2. Nothing happens.
3. Tap hardware back button again.
4. App navigates two pages/views back with a slide transition.

Actual Result 2:

1. Tap hardware back key on Android OS.
2. Nothing happens.
3. Tap anywhere on the screen (except the back button).
4. App immediately navigates correctly one page/view back with a slide transition.

My best guess is it has something to do with WebViews and focus. Any help appreciated :)

Hi,
Are you planing (in near future :) ) to implement Fixed Header and Footer feature for Android devices like on iOS. Or at least if you can give me hint how to do it, i'm eager to try to implement it.

Damir

what a awesome plugin，just want to ask...
is there any plan about the "WP8 support" ?

according to this
http://plugins.telerik.com/plugin/native-page-transitions
we can use the href to locate the page，it is work perfect
but it seem only use the .html format and seem can't use .php or other format

is it possible to use the "javascript format" by future
because when I use in JQM
the ajax change page like these code

function mypage
{
 $(':mobile-pagecontainer').pagecontainer('change', topage, 
 {
 some method or command
 }
}

if can let the href become such like this

"href" : function() { mypage(); or do some magic javascript }

I think that will more Elasticity

hi @EddyVerbruggen
according to this
http://plugins.telerik.com/cordova/plugin/native-page-transitions

when I use

var options = {
  "duration"       :  600, // in milliseconds (ms), default 400
  "iosdelay"       :   50, // ms to wait for the iOS webview to update before animation kicks in, default 60
  "androiddelay"   :  100
};
window.plugins.nativepagetransitions.fade(
  options,
  function (msg) {alert("success: " + msg)}, // called when the animation has finished
  function (msg) {alert("error: " + msg)} // called in case you pass in weird values
);

in Android and iOS，it will trigger the success callback，but...it seem have no really animation show up
in winphone，it will trigger the success callback，and print "Invalid action"，is it because that "Fade" function not ready for wp8 ?