https://github.com/waseemdev/ng-ionic-connectedanim
Connected Animation (Shared Element Transition) for Ionic Framework.
https://github.com/waseemdev/ng-ionic-connectedanim
angular animation ionic ionic2 transition
Last synced: about 1 year ago
JSON representation
Connected Animation (Shared Element Transition) for Ionic Framework.
- Host: GitHub
- URL: https://github.com/waseemdev/ng-ionic-connectedanim
- Owner: waseemdev
- License: mit
- Created: 2018-03-10T12:10:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-27T10:55:32.000Z (over 7 years ago)
- Last Synced: 2025-02-13T19:04:05.136Z (about 1 year ago)
- Topics: angular, animation, ionic, ionic2, transition
- Language: TypeScript
- Size: 10.1 MB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Connected Animation for Ionic Framework
Easily add Connected Animation (in UWP) or Shared Element Transition (in Android) to your elements.
# Example Project
[Here is an example](example)
# Setup
1. install via npm:
```
npm i ng-ionic-connectedanim@latest --save
```
2. Import ConnectedAnimationModule in you module
```typescript
import { ConnectedAnimationModule } from "ng-ionic-connectedanim";
@NgModule({
imports: [
ConnectedAnimationModule.forRoot(),
....
]
})
export class AppModule { }
```
# Usage
## 1. Basic example. as easy as:
In Page1.html:
```html
![]()
Push page2
```
Page1.ts:
```javascript
push() {
this.navCtrl.push('Page2');
}
```
Page2.html:
```html
![]()
```
## 2. Multiple connected animation
Page1.html:
```html
![]()
Push page2
```
Page1.ts:
```javascript
push() {
this.navCtrl.push('Page2');
}
```
Page2.html:
```html
![]()
```
**Note:** If you want to use any element other than `img`, the `animStart` element and `animEnd` must be identical in font-*, width, height and text-align, otherwise the animation will not work well.
## 3. Multiple Items as 'animStart'
When you have a list of items in the first page, it is important to pass the element index before navigate to the second page, so animation can be played correctly.
Also add `animItem` attribute to animated element.
Page1.html:
```html
![]()
```
Pgae1.ts:
```javascript
import {ConnectedAnimationService} from 'ng-ionic-connectedanim';
export class Page1 {
constructor(private navCtrl: NavController,
private connectedAnimationService: ConnectedAnimationService) {
}
pushPage(itemIndex) {
// pass item index
this.connectedAnimationService.setItemIndex(itemIndex, this);
// then push page2
this.navCtrl.push('Page2');
}
}
```
Page2.html:
```html
![]()
```
## 4. Manually play animation:
This is useful for elements in the same page.
set autoFire to false in `animOptions`:
```html
![]()
Open
![]()
Close
```
```javascript
export class Page {
constructor(private animationService: ConnectedAnimationService) {
}
openModal() {
// first show your modal
// Make sure its 'style.display' is not 'none' before playing animation.
//let itemIndex = 0; /* Send element index if you are using ngFor */
this.animationService.playAnimations(this/*, itemIndex*/);
// or play a specific animation by its name
//this.animationService.playAnimation('animation1'/*, itemIndex*/);
}
closeModal() {
this.animationService.playAnimationBack(this);
// then hide the modal...
}
}
```
# Options
You can pass animation options to `animStart' element.
```html
![]()
```
#### Options:
| Option | Desc. |
| ------ | ------- |
| autoFire | Set autoFire to false to manually play the animation by calling animationService.playAnimation(), default is true. |
| type | Animation type, e.g.: 'ease', 'ease-in'... |
| delay | Animation delay. |
| duration | Animation duration. |
| targetRect | Target element ('animEnd' element) position or offset. |