List Items Animation for Ionic Framework

Apply animation to list items after scrolling up and down.

!Example

Setup

1. install via npm:
``
npm i ng-ionic-listitemsanim@latest --save
`
2. Import ListItemsAnimModule in you module
`typescript
import { ListItemsAnimModule } from "ng-ionic-listitemsanim";

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

Usage Example


Add listItemsAnim directive to the list. Must be used with [virtualScroll], otherwise will not work.

Add listItemAnim directive to the item.

`html

{{item.title}}

`

And style your element's animation:
`scss
ion-list {
/ modify list's style /
background-color: #f5f5f5 !important;
}

.item {
/ modify item's style /
background-color: transparent;
padding: 0;
margin: 5px 0;

/*
Don't use transition on .item[listItemAnim], especially for 'transform' property, otherwise will see unexpected result.
transition: all 200ms ease-out;
*/

.item-inner {
/ modify item's style /
padding-left: 16px;
background-color: #fff;

/ actual animation styles /
transition: all 200ms ease;
}

/ actual animation styles /
&.anim-listitem-hidden-top {
.item-inner {
/ Note that the animation will not be noticeable if the parent item (.item) wasn't transparent. /
opacity: 0;
transform: translate3d(-10px, -10px, 0) scale(.8);
}
}
&.anim-listitem-hidden-bottom {
.item-inner {
opacity: 0;
transform: translate3d(10px, 10px, 0) scale(.8);
}
}
&.anim-listitem-visible {
/ optional extra class when element become visible /
}

/ you can specify a delay for each item according to its position in the visible area of the list /
&.anim-listitem-0 {
transition-delay: 0ms !important;
.item-inner {
transition-delay: 0ms !important;
}
}
&.anim-listitem-1 {
transition-delay: 100ms !important;
.item-inner {
transition-delay: 100ms !important;
}
}
&.anim-listitem-2 {
transition-delay: 200ms !important;
.item-inner {
transition-delay: 200ms !important;
}
}
&.anim-listitem-3 {
transition-delay: 300ms !important;
.item-inner {
transition-delay: 300ms !important;
}
}
&.anim-listitem-4 {
transition-delay: 400ms !important;
.item-inner {
transition-delay: 400ms !important;
}
}
&.anim-listitem-5 {
transition-delay: 500ms !important;
.item-inner {
transition-delay: 500ms !important;
}
}
&.anim-listitem-6 {
transition-delay: 600ms !important;
.item-inner {
transition-delay: 600ms !important;
}
}
&.anim-listitem-7 {
transition-delay: 700ms !important;
.item-inner {
transition-delay: 700ms !important;
}
}
&.anim-listitem-8 {
transition-delay: 800ms !important;
.item-inner {
transition-delay: 800ms !important;
}
}
&.anim-listitem-9 {
transition-delay: 900ms !important;
.item-inner {
transition-delay: 900ms !important;
}
}
...
}
`

$3


You can add offset to the visible area of the list by passing options:
`html

...

``