Connected Animation for Ionic Framework v4

Easily add Connected Animation (in UWP) or Shared Element Transition (in Android) to your elements.

Example Project

Here is an example

Setup

1. install via npm:
``
npm i ng-ionic4-connectedanim@latest --save
`
2. Import ConnectedAnimationModule in your module:
`typescript
import { ConnectedAnimationModule } from "ng-ionic4-connectedanim";

@NgModule({
imports: [
ConnectedAnimationModule,
....
]
})
export class AppModule { }
`

Usage

1. Basic example. as easy as:

In Page1.html:
`html

Push page2
`
Page1.ts:
`javascript
push() {
this.router.navigate(['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 and animEnd elements must be identical in font-*, width, height and text-align, otherwise the animation will not work well.

3. Multiple Items as 'animStart'

!Example 1

When you have a list of items in the first page, it is important to pass the element index before navigating to the second page, so animation can be played correctly.
Also add animItem attribute to animated element.

list-page.html:
`html



`
list-page.ts:
`javascript
import {ConnectedAnimationService} from 'ng-ionic4-connectedanim';
import { Router } from '@angular/router';
export class ListPage {
constructor(private navCtrl: NavController,
private router: Router,
private connectedAnimationService: ConnectedAnimationService) {
}

pushPage(itemIndex) {
// pass item index
this.connectedAnimationService.prepareItem(itemIndex, this);
// then push DetailPage
this.router.navigate(['DetailPage', itemIndex]);
}
}
`
DetailPage.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...
}
}
`

!Example 2

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. |