{"id":13750083,"url":"https://github.com/shprink/ionic-native-transitions","last_synced_at":"2025-04-12T21:24:04.875Z","repository":{"id":57275997,"uuid":"43754052","full_name":"shprink/ionic-native-transitions","owner":"shprink","description":"[Maintenance only] Native transitions (iOS \u0026 Android) for Ionic Framework","archived":false,"fork":false,"pushed_at":"2017-03-17T17:30:09.000Z","size":12601,"stargazers_count":571,"open_issues_count":42,"forks_count":112,"subscribers_count":35,"default_branch":"develop","last_synced_at":"2025-04-04T03:02:56.722Z","etag":null,"topics":["angularjs","ionic","ionic-framework"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ionic-native-transitions","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shprink.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-06T13:57:33.000Z","updated_at":"2024-12-05T05:53:26.000Z","dependencies_parsed_at":"2022-08-25T01:14:15.132Z","dependency_job_id":null,"html_url":"https://github.com/shprink/ionic-native-transitions","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shprink%2Fionic-native-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shprink%2Fionic-native-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shprink%2Fionic-native-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shprink%2Fionic-native-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shprink","download_url":"https://codeload.github.com/shprink/ionic-native-transitions/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248632953,"owners_count":21136779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","ionic","ionic-framework"],"created_at":"2024-08-03T08:00:21.210Z","updated_at":"2025-04-12T21:24:04.849Z","avatar_url":"https://github.com/shprink.png","language":"JavaScript","readme":"Native transitions for Ionic v1. Turn it on and enjoy native transitions!\n\n![gif](http://examples.julienrenaux.fr/native-transitions/native-transitions.gif)\n\n**Please note that this project is now in maintenance mode.** We welcome PRs for bug fixes, but encourage you to use Ionic 2 and [Ionic Native](https://ionicframework.com/docs/v2/native/nativepagetransitions/) for all future development.\n\n\n## Chat\n\n[![Join the chat at https://gitter.im/shprink/ionic-native-transitions](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/shprink/ionic-native-transitions)\n\n# Installation\n## npm\n[https://www.npmjs.com/package/ionic-native-transitions](https://www.npmjs.com/package/ionic-native-transitions)\n\n```\nnpm install ionic-native-transitions --save\n```\n\nThen require the library\n\n```js\n# ES5\nrequire('ionic-native-transitions');\n\n# or ES6\nimport 'ionic-native-transitions';\n```\n\n## Bower\n\n```\nbower install shprink/ionic-native-transitions\n```\n\nThen insert the dist file\n\n```\n\u003cscript src=\"./PathToBowerLib/dist/ionic-native-transitions.min.js\"\u003e\u003c/script\u003e\n```\n\n## Cordova/Ionic\nThe recommended version for the Transition plugin is 0.6.5 or higher.\n\n```\n# Using Cordova\ncordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5\n\n# Using Ionic CLI\nionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5\n```\n\n### iOS\nTransitions on iOS9 can flicker sometimes. To prevent this from hapenning you can install this plugin:\n\n```\n# Using Cordova\ncordova plugin add cordova-plugin-wkwebview\n\n# Using Ionic CLI\nionic plugin add cordova-plugin-wkwebview\n```\n\n### Android\nif you are using Crosswalk \u003e 1.3 please add the following to your `config.xml`\n\n```\n\u003cpreference name=\"CrosswalkAnimatable\" value=\"true\" /\u003e\n```\n\n# Configuration\n\n```js\nangular.module('yourApp', [\n    'ionic-native-transitions'\n]);\n```\n\n## Set default options (optional)\n**_Beware_**: Only use `setDefaultOptions` if you know what you are doing.\n\n```js\n.config(function($ionicNativeTransitionsProvider){\n    $ionicNativeTransitionsProvider.setDefaultOptions({\n        duration: 400, // in milliseconds (ms), default 400,\n        slowdownfactor: 4, // overlap views (higher number is more) or no overlap (1), default 4\n        iosdelay: -1, // ms to wait for the iOS webview to update before animation kicks in, default -1\n        androiddelay: -1, // same as above but for Android, default -1\n        winphonedelay: -1, // same as above but for Windows Phone, default -1,\n        fixedPixelsTop: 0, // the number of pixels of your fixed header, default 0 (iOS and Android)\n        fixedPixelsBottom: 0, // the number of pixels of your fixed footer (f.i. a tab bar), default 0 (iOS and Android)\n        triggerTransitionEvent: '$ionicView.afterEnter', // internal ionic-native-transitions option\n        backInOppositeDirection: false // Takes over default back transition and state back transition to use the opposite direction transition to go back\n    });\n});\n```\n\n## Set default transition (optional)\n[See the list of possible transitions](#transitions)\n\n```js\n.config(function($ionicNativeTransitionsProvider){\n    $ionicNativeTransitionsProvider.setDefaultTransition({\n        type: 'slide',\n        direction: 'left'\n    });\n});\n```\n\n## Set default back transition (optional)\n[See the list of possible transitions](#transitions)\n\n```js\n.config(function($ionicNativeTransitionsProvider){\n    $ionicNativeTransitionsProvider.setDefaultBackTransition({\n        type: 'slide',\n        direction: 'right'\n    });\n});\n```\n\n## Enable/Disable (optional)\nYou can programatically disable the plugin for any reason:\n\n```js\n# Within the config phase\n# * @param {boolean} enabled\n$ionicNativeTransitionsProvider.enable(false);\n\n# Anywhere else (controller, service etc.)\n# * @param {boolean} enabled                    default true\n# * @param {boolean} disableIonicTransitions    default true\n# * @param {string}  ionicTransitionType        default 'platform'\n\n# Disable plugin and enable ionic transitions (same as: enable(false, false))\n$ionicNativeTransitions.enable(false);\n\n# Enable plugin and disable ionic transitions (same as: enable(true, true))\n$ionicNativeTransitions.enable(true);\n\n# Disable plugin and disable ionic transitions\n$ionicNativeTransitions.enable(false, true);\n\n# Enable plugin and enable ionic transitions\n# in some cases it is useful \u003chttps://github.com/shprink/ionic-native-transitions/issues/23\u003e\n$ionicNativeTransitions.enable(true, false);\n```\n\n# Usage\nBy default any state transition will use the default transition (Defined in the configuration phase) but you can specify a different transition per state if you want using the UI router state definition:\n\n```js\n.state('home', {\n    url: '/home',\n    nativeTransitions: {\n        \"type\": \"flip\",\n        \"direction\": \"up\"\n    }\n    templateUrl: \"templates/home.html\"\n})\n```\n\nYou can also define a different transition (backward and forward) per device like this:\n\n```js\n.state('home', {\n    url: '/home',\n    nativeTransitionsAndroid: {\n        \"type\": \"flip\",\n        \"direction\": \"right\"\n    },\n    nativeTransitionsIOS: {\n        \"type\": \"flip\",\n        \"direction\": \"left\"\n    },\n    nativeTransitionsWindowsPhone: {\n        \"type\": \"flip\",\n        \"direction\": \"down\"\n    },\n    nativeTransitionsBackAndroid: {\n        \"type\": \"flip\",\n        \"direction\": \"left\"\n    },\n    nativeTransitionsBackIOS: {\n        \"type\": \"flip\",\n        \"direction\": \"right\"\n    },\n    nativeTransitionsBackWindowsPhone: {\n        \"type\": \"flip\",\n        \"direction\": \"up\"\n    },\n    templateUrl: \"templates/home.html\"\n})\n```\n\nOverwrite just one device (here only android will be different)\n\n```js\n.state('home', {\n    url: '/home',\n    nativeTransitions: {\n        \"type\": \"flip\",\n        \"direction\": \"up\"\n    },\n    nativeTransitionsAndroid: {\n        \"type\": \"flip\",\n        \"direction\": \"right\"\n    }\n    templateUrl: \"templates/home.html\"\n})\n```\n\nDisable native transition for one state (for instance on tabs)\n\n```js\n.state('home', {\n    url: '/home',\n    nativeTransitions: null,\n    templateUrl: \"templates/home.html\"\n})\n```\n\n## Programatically change page with native transitions\n\n### State\n\n```js\n# * @description\n# * Call state go and apply a native transition\n# * @param {string|null} state                default:null\n# * @param {object}      stateParams          default:{}\n# * @param {object}      stateOptions         default:{}\n# * @param {object|null} transitionOptions    default:null\n\n$ionicNativeTransitions.stateGo('yourState', {}, {}, {\n    \"type\": \"slide\",\n    \"direction\": \"up\", // 'left|right|up|down', default 'left' (which is like 'next')\n    \"duration\": 1500, // in milliseconds (ms), default 400\n});\n```\n\n### Location.url\n\n```js\n# * @description\n# * Call location url and apply a native transition\n# * @param {string|null} url                 default:null\n# * @param {object|null} transitionOptions   default:null\n\n$ionicNativeTransitions.locationUrl('/yourUrl', {\n    \"type\": \"slide\",\n    \"direction\": \"down\", // 'left|right|up|down', default 'left' (which is like 'next')\n    \"duration\": 1500, // in milliseconds (ms), default 400\n});\n```\n\n## Using directives\n\n```html\n\u003cbutton native-ui-sref=\"tabs.home({param1: 'param1', param2: 'param2'})\" native-ui-sref-opts=\"{reload: true}\" native-options=\"{type: 'slide', direction:'down'}\"\u003e\u003c/button\u003e\n```\n\n## History back button\n\nUsing the `\u003cion-nav-back-button\u003e` directive automatically uses the default back transition if you have not added a specific `ng-click` on it.\n\n## Hadware back button (Android)\n\nThe hardware back button on Android uses the default back transition\n\n## Swipe back (iOS)\n\nFor now swipe back will trigger the state native transition (or the default). It does not use the back transition.\n\nYou can disable swipe back like this:\n\n```js\n$ionicConfigProvider.views.swipeBackEnabled(false);\n```\n\n\u003ca name=\"transitions\"\u003e\u003c/a\u003e\n\n## Events\nYou can listen to success or error events\n\n```js\n$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){\n    // Transition is about to happen\n});\n\n$rootScope.$on('ionicNativeTransitions.success', function(){\n    // Transition success\n});\n\n$rootScope.$on('ionicNativeTransitions.error', function(){\n    // Transition error\n});\n```\n\n# Possible transitions\n## Slide (default animation)\n\n```js\n{\n    \"type\"          : \"slide\",\n    \"direction\"     : \"left\", // 'left|right|up|down', default 'left' (which is like 'next')\n    \"duration\"      :  500, // in milliseconds (ms), default 400\n}\n```\n\n## Flip\n\n```js\n{\n    \"type\"          : \"flip\",\n    \"direction\"     : \"up\", // 'left|right|up|down', default 'right' (Android currently only supports left and right)\n    \"duration\"      :  500, // in milliseconds (ms), default 400\n}\n```\n\n## Fade (iOS and Android only)\n\n```js\n{\n    \"type\"          : \"fade\",\n    \"duration\"      :  500, // in milliseconds (ms), default 400\n}\n```\n\n## Drawer (iOS and Android only)\n\n```js\n{\n    \"type\"          : \"drawer\",\n    \"origin\"        : \"left\", // 'left|right', open the drawer from this side of the view, default 'left'\n    \"action\"        : \"open\", // 'open|close', default 'open', note that close is not behaving nicely on Crosswalk\n }\n```\n\n## Curl (iOS only, direction up and down only)\n\n```js\n{\n    \"type\"          : \"curl\",\n    \"direction\"     : \"up\", // 'up|down', default 'up'\n}\n```\n\n# FAQ\n\n## What's the best way to animate tabs?\n\nUse fade transition\n\n```js\n.state('tabs.contact', {\n    url: \"/contact\",\n    nativeTransitions: {\n        type: \"fade\"\n    }\n})\n```\n\nif you to use slide, use it with the `fixedPixelsTop` option. \n\n```js\n.state('tabs.contact', {\n    url: \"/contact\",\n    nativeTransitions: {\n        type: \"slide\",\n        direction: \"left\",\n        fixedPixelsTop: 93\n    }\n})\n```\n\n# Contribute\n## Development\n\n```\nnpm install\n\n# Open two terminals\n# and run watch to build on the lib files changes\nnpm run watch\n\n# in the other terminal run following to build the test page and the doc\nnpm start\n```\n\nOpen `http://localhost:8080`\n\n## Tests on device\n\n```\nnpm run platformAddAndroid\nnpm run platformAddIOS\nnpm run pluginAddAll\n\n# run iOS devices\nnpm run runIosDevice\n\n# run iOS devices\nnpm run runAndroid\n```\n\n# Thanks\n- Eddy Verbruggen for his amazing job on: [https://github.com/Telerik-Verified-Plugins/NativePageTransitions](https://github.com/Telerik-Verified-Plugins/NativePageTransitions)\n- GAJOTRES for his great post: [http://www.gajotres.net/handling-native-view-animations-with-ionic-framework/](http://www.gajotres.net/handling-native-view-animations-with-ionic-framework/)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshprink%2Fionic-native-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshprink%2Fionic-native-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshprink%2Fionic-native-transitions/lists"}