List items animation for Ionic Framework.
npm install ng-ionic-listitemsanim1. install via npm:
```
npm i ng-ionic-listitemsanim@latest --save`
2. Import ListItemsAnimModule in you moduletypescript
import { ListItemsAnimModule } from "ng-ionic-listitemsanim";
@NgModule({
imports: [
ListItemsAnimModule,
....
]
})
export class AppModule { }
`
directive to the list. Must be used with [virtualScroll], otherwise will not work.Add
listItemAnim directive to the item.`html
`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
...
``