Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shprink/ionic-native-transitions
[Maintenance only] Native transitions (iOS & Android) for Ionic Framework
https://github.com/shprink/ionic-native-transitions
angularjs ionic ionic-framework
Last synced: about 1 month ago
JSON representation
[Maintenance only] Native transitions (iOS & Android) for Ionic Framework
- Host: GitHub
- URL: https://github.com/shprink/ionic-native-transitions
- Owner: shprink
- License: mit
- Created: 2015-10-06T13:57:33.000Z (about 9 years ago)
- Default Branch: develop
- Last Pushed: 2017-03-17T17:30:09.000Z (over 7 years ago)
- Last Synced: 2024-04-14T08:35:41.256Z (7 months ago)
- Topics: angularjs, ionic, ionic-framework
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/ionic-native-transitions
- Size: 12 MB
- Stars: 573
- Watchers: 37
- Forks: 113
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Native transitions for Ionic v1. Turn it on and enjoy native transitions!
**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.
## Chat
[](https://gitter.im/shprink/ionic-native-transitions)
# Installation
## npm
[https://www.npmjs.com/package/ionic-native-transitions](https://www.npmjs.com/package/ionic-native-transitions)
```
npm install ionic-native-transitions --save
```
Then require the library
```js
# ES5
require('ionic-native-transitions');
# or ES6
import 'ionic-native-transitions';
```
## Bower
```
bower install shprink/ionic-native-transitions
```
Then insert the dist file
```
```
## Cordova/Ionic
The recommended version for the Transition plugin is 0.6.5 or higher.
```
# Using Cordova
cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5
# Using Ionic CLI
ionic plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions#0.6.5
```
### iOS
Transitions on iOS9 can flicker sometimes. To prevent this from hapenning you can install this plugin:
```
# Using Cordova
cordova plugin add cordova-plugin-wkwebview
# Using Ionic CLI
ionic plugin add cordova-plugin-wkwebview
```
### Android
if you are using Crosswalk > 1.3 please add the following to your `config.xml`
```
```
# Configuration
```js
angular.module('yourApp', [
'ionic-native-transitions'
]);
```
## Set default options (optional)
**_Beware_**: Only use `setDefaultOptions` if you know what you are doing.
```js
.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
});
});
```
## Set default transition (optional)
[See the list of possible transitions](#transitions)
```js
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setDefaultTransition({
type: 'slide',
direction: 'left'
});
});
```
## Set default back transition (optional)
[See the list of possible transitions](#transitions)
```js
.config(function($ionicNativeTransitionsProvider){
$ionicNativeTransitionsProvider.setDefaultBackTransition({
type: 'slide',
direction: 'right'
});
});
```
## Enable/Disable (optional)
You can programatically disable the plugin for any reason:
```js
# Within the config phase
# * @param {boolean} enabled
$ionicNativeTransitionsProvider.enable(false);
# Anywhere else (controller, service etc.)
# * @param {boolean} enabled default true
# * @param {boolean} disableIonicTransitions default true
# * @param {string} ionicTransitionType default 'platform'
# Disable plugin and enable ionic transitions (same as: enable(false, false))
$ionicNativeTransitions.enable(false);
# Enable plugin and disable ionic transitions (same as: enable(true, true))
$ionicNativeTransitions.enable(true);
# Disable plugin and disable ionic transitions
$ionicNativeTransitions.enable(false, true);
# Enable plugin and enable ionic transitions
# in some cases it is useful
$ionicNativeTransitions.enable(true, false);
```
# Usage
By 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:
```js
.state('home', {
url: '/home',
nativeTransitions: {
"type": "flip",
"direction": "up"
}
templateUrl: "templates/home.html"
})
```
You can also define a different transition (backward and forward) per device like this:
```js
.state('home', {
url: '/home',
nativeTransitionsAndroid: {
"type": "flip",
"direction": "right"
},
nativeTransitionsIOS: {
"type": "flip",
"direction": "left"
},
nativeTransitionsWindowsPhone: {
"type": "flip",
"direction": "down"
},
nativeTransitionsBackAndroid: {
"type": "flip",
"direction": "left"
},
nativeTransitionsBackIOS: {
"type": "flip",
"direction": "right"
},
nativeTransitionsBackWindowsPhone: {
"type": "flip",
"direction": "up"
},
templateUrl: "templates/home.html"
})
```
Overwrite just one device (here only android will be different)
```js
.state('home', {
url: '/home',
nativeTransitions: {
"type": "flip",
"direction": "up"
},
nativeTransitionsAndroid: {
"type": "flip",
"direction": "right"
}
templateUrl: "templates/home.html"
})
```
Disable native transition for one state (for instance on tabs)
```js
.state('home', {
url: '/home',
nativeTransitions: null,
templateUrl: "templates/home.html"
})
```
## Programatically change page with native transitions
### State
```js
# * @description
# * Call state go and apply a native transition
# * @param {string|null} state default:null
# * @param {object} stateParams default:{}
# * @param {object} stateOptions default:{}
# * @param {object|null} transitionOptions default:null
$ionicNativeTransitions.stateGo('yourState', {}, {}, {
"type": "slide",
"direction": "up", // 'left|right|up|down', default 'left' (which is like 'next')
"duration": 1500, // in milliseconds (ms), default 400
});
```
### Location.url
```js
# * @description
# * Call location url and apply a native transition
# * @param {string|null} url default:null
# * @param {object|null} transitionOptions default:null
$ionicNativeTransitions.locationUrl('/yourUrl', {
"type": "slide",
"direction": "down", // 'left|right|up|down', default 'left' (which is like 'next')
"duration": 1500, // in milliseconds (ms), default 400
});
```
## Using directives
```html
```
## History back button
Using the `` directive automatically uses the default back transition if you have not added a specific `ng-click` on it.
## Hadware back button (Android)
The hardware back button on Android uses the default back transition
## Swipe back (iOS)
For now swipe back will trigger the state native transition (or the default). It does not use the back transition.
You can disable swipe back like this:
```js
$ionicConfigProvider.views.swipeBackEnabled(false);
```
## Events
You can listen to success or error events
```js
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
// Transition is about to happen
});
$rootScope.$on('ionicNativeTransitions.success', function(){
// Transition success
});
$rootScope.$on('ionicNativeTransitions.error', function(){
// Transition error
});
```
# Possible transitions
## Slide (default animation)
```js
{
"type" : "slide",
"direction" : "left", // 'left|right|up|down', default 'left' (which is like 'next')
"duration" : 500, // in milliseconds (ms), default 400
}
```
## Flip
```js
{
"type" : "flip",
"direction" : "up", // 'left|right|up|down', default 'right' (Android currently only supports left and right)
"duration" : 500, // in milliseconds (ms), default 400
}
```
## Fade (iOS and Android only)
```js
{
"type" : "fade",
"duration" : 500, // in milliseconds (ms), default 400
}
```
## Drawer (iOS and Android only)
```js
{
"type" : "drawer",
"origin" : "left", // 'left|right', open the drawer from this side of the view, default 'left'
"action" : "open", // 'open|close', default 'open', note that close is not behaving nicely on Crosswalk
}
```
## Curl (iOS only, direction up and down only)
```js
{
"type" : "curl",
"direction" : "up", // 'up|down', default 'up'
}
```
# FAQ
## What's the best way to animate tabs?
Use fade transition
```js
.state('tabs.contact', {
url: "/contact",
nativeTransitions: {
type: "fade"
}
})
```
if you to use slide, use it with the `fixedPixelsTop` option.
```js
.state('tabs.contact', {
url: "/contact",
nativeTransitions: {
type: "slide",
direction: "left",
fixedPixelsTop: 93
}
})
```
# Contribute
## Development
```
npm install
# Open two terminals
# and run watch to build on the lib files changes
npm run watch
# in the other terminal run following to build the test page and the doc
npm start
```
Open `http://localhost:8080`
## Tests on device
```
npm run platformAddAndroid
npm run platformAddIOS
npm run pluginAddAll
# run iOS devices
npm run runIosDevice
# run iOS devices
npm run runAndroid
```
# Thanks
- Eddy Verbruggen for his amazing job on: [https://github.com/Telerik-Verified-Plugins/NativePageTransitions](https://github.com/Telerik-Verified-Plugins/NativePageTransitions)
- 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/)